Skip to content
QuickToolio
es - Espanolen - English

Check color contrast (WCAG)

Check whether two colors meet the WCAG AA and AAA contrast levels for normal and large text.

Processed on your device. Nothing is sent to any server.
Sample text

16.85:1

  • AA normal text (4.5:1)Pass
  • AA large text (3:1)Pass
  • AAA normal text (7:1)Pass
  • AAA large text (4.5:1)Pass

Check whether a text/background color combination meets the AA and AAA contrast levels from the WCAG 2.x accessibility guidelines.

Calculates the relative luminance of each color per the WCAG formula and derives the contrast ratio between them, comparing it against the 3:1, 4.5:1 and 7:1 thresholds.

Use cases

  • Verifying that a button or text is readable before publishing.
  • Auditing an interface's accessibility.
  • Choosing brand colors that meet WCAG AA.

How it works

  1. 1

    Pick text and background colors

    Enter both colors in HEX.

  2. 2

    Check the ratio

    See the contrast ratio and which WCAG levels it meets.

Frequently asked questions

What's the difference between AA and AAA?
AA is the recommended minimum level (4.5:1 for normal text); AAA is stricter (7:1) and recommended for critical content.
What counts as large text under WCAG?
Text of at least 18pt, or 14pt bold, which has a lower contrast threshold (3:1 under AA).

Related tools

← Colors & design