Color Contrast Checker - WCAG AA/AAA Ratio Tester

Check text and UI color pairs against WCAG contrast thresholds. Everything runs locally in your browser.

Colors

Hex, RGB(A), HSL(A), Hex8, or CSS named color.
Background alpha is composited over white for display.

Preview

Normal text sample

Large text sample

UI component

Result

Contrast ratio
-
Enter valid colors
AA normal text-
AAA normal text-
AA large text-
AAA large text-
AA UI / graphics-

Quick alternatives

How the contrast ratio is calculated

WCAG contrast compares the relative luminance of the lighter and darker colors:

contrast ratio = (L1 + 0.05) / (L2 + 0.05)

For sRGB colors, each channel is linearized first, then luminance is calculated as 0.2126 R + 0.7152 G + 0.0722 B. The result ranges from 1:1 for identical colors to 21:1 for black on white.

Thresholds used here: AA normal text 4.5:1, AA large text and non-text UI components 3:1, AAA normal text 7:1, and AAA large text 4.5:1. Transparent foreground colors are blended over the background before testing.

Advertisement

How to use this checker

  1. Enter the text color in the foreground field or use the picker.
  2. Enter the page, card, or button background color.
  3. Check the AA and AAA rows for normal text, large text, and UI components.
  4. Use swap when you want to compare the reverse pairing.
  5. Copy the report or download a CSV row for an accessibility note or review ticket.

WCAG large text means at least 18 point regular text, or at least 14 point bold text. Contrast is only one part of accessible design; spacing, focus states, text size, font weight, and state changes also matter.

FAQ

Can a color pair pass AA but fail AAA?

Yes. A ratio such as 5.2:1 passes AA normal text but fails AAA normal text because AAA requires 7:1.

Why does large text have a lower threshold?

Large text is easier to read at lower contrast, so WCAG sets lower minimums for large or bold text.

Does opacity affect contrast?

Yes. A semi-transparent foreground color is blended with the background before contrast is calculated, which often lowers the final contrast.

Can I use this for icons and form controls?

Use the AA UI / graphics result for meaningful icons, chart marks, focus outlines, input borders, and other non-text elements that need a 3:1 contrast check.

Explore more tools