Skip to content

Contrast checker

Does a colour pair pass WCAG AA and AAA — for normal and large text, icons and borders? With the nearest passing colour, APCA and colour-blindness previews.

  • WCAG 2.2 AA · AAA
  • APCA Lc
  • 5 vision types
  • Free, no sign-in

Colour pair

Text size

Large means 24px and up, or 18.7px bold.

Level

Result

The quick brown fox

The quick brown fox jumps over the lazy dog. This is how text of this size reads on your background.

WCAG ratio18.89:1
Passes AA

Normal text · needs 4.5:1

APCALc 105

any text

  • Normal text · AA4.5:1Pass
  • Normal text · AAA7:1Pass
  • Large text · AA3:1Pass
  • Large text · AAA4.5:1Pass
  • Icons & field borders · 1.4.113:1Pass

How people with colour blindness see it

Machado et al. (2009) simulation in linear RGB. The ratio under each tile is computed for the simulated colours.

  • Typical vision18.89:1
  • Protanopiano red cones · ~1% of men18.89:1
  • Deuteranopiano green cones · ~1% of men18.89:1
  • Tritanopiano blue cones · rare18.89:1
  • Achromatopsiano colour, luminance only18.89:1
How it works

Four steps to legible

  1. Step 1. Choose your colours

    With the picker or a HEX code — shorthand like #fff works too.

  2. Step 2. Get the ratio

    Computed with the WCAG 2 relative-luminance formula and never rounded up past a threshold.

  3. Step 3. Check compliance

    AA or AAA, normal or large text, icons and borders — plus APCA for WCAG 3.

  4. Step 4. Fix and share

    Apply the nearest passing colour and send a link to the pair to a teammate.

FAQ

About contrast

What is WCAG contrast ratio and how is it calculated?

WCAG contrast ratio measures the difference in relative luminance between two colors. Luminance is the perceived brightness of a color, calculated from its RGB channels with gamma correction to match human vision. The ratio ranges from 1:1 (identical colors) to 21:1 (black on white). Higher ratios mean text is easier to read, especially for users with low vision or color blindness.

Difference between WCAG AA and AAA?

AA (minimum) requires 4.5:1 for normal text and 3:1 for large text — the legal baseline in many countries. AAA (enhanced) requires 7:1 for normal and 4.5:1 for large text — recommended for government, medical, and reading-heavy interfaces. AA is the practical target for most projects.

What qualifies as 'large text' in WCAG?

Large text means 18pt (24px) or larger for regular weight, or 14pt (~18.67px) for bold. The threshold is lower because the physical size makes glyphs easier to read. Body copy at 16px does not count as large text.

How do I test dark mode accessibility?

Swap your foreground and background — enter the dark background as background and the light text as foreground. Many designs fail dark mode because designers reverse the same pair without re-checking. Always validate both modes independently.

Does WCAG contrast apply to icons and UI elements?

Yes. WCAG 1.4.11 (Non-text Contrast) requires 3:1 for icons that convey information, form borders, and focus indicators against adjacent colours.
Keep going

Other UIXColors tools that pair well with the WCAG Contrast Checker.

Guide for this tool

Related

Popular colors and their contrast

BlackWhiteSlate 500Gray 500Zinc 500Stone 500
Copied