Color Contrast Checker

1. Enter the text or icon color as Foreground and the surface color as Background. HEX, RGB, HSL and named colors all work.
2. Read the WCAG 2.1 contrast ratio and the pass or fail badge on each result row.
3. Check the live preview to see the pair as real text and interface elements.
4. Switch on a protanopia, deuteranopia, tritanopia or achromatopsia simulation to see how the pair holds up.
5. Copy the URL to share the check. Both colors are stored in it, for example /contrast-checker?fg=333333&bg=ffffff, a pair that measures about 12.6:1.

• Normal Text AA needs 4.5:1 (SC 1.4.3). This is the level most laws and policies point to.
• Normal Text AAA needs 7:1 (SC 1.4.6), the enhanced level. Large text at AAA needs 4.5:1.
• Large Text AA needs 3:1, for text that meets the size rule below.
• UI Components AA needs 3:1 (SC 1.4.11) for control boundaries, states and meaningful graphics.

The ratio is (L1 + 0.05) ÷ (L2 + 0.05), where L is the relative luminance of the lighter and darker color, so it runs from 1:1 for identical colors to 21:1 for black on white. Ratios are not rounded up: 4.49:1 fails a 4.5:1 requirement. WCAG contrast explained walks through the luminance math.

Large text is at least 18pt (24px) at regular weight, or at least 14pt (about 18.66px) in bold. A 20px regular heading is still normal text and needs 4.5:1; the same heading at 20px bold counts as large and needs 3:1. Logos, incidental text and disabled controls are exempt.

SC 1.4.11 applies 3:1 to what users need to identify a control or read a graphic: input borders, focus indicators, checkbox outlines, toggle states, icons and chart lines. A #CCCCCC input border on white is only 1.6:1. #949494 reaches 3.03:1 and passes, while #959595 falls just short at 2.99:1.

Change lightness before you change hue. Gray text #777777 on white is 4.47:1 and fails AA; one step darker, #767676 reaches 4.54:1 and passes, which makes it the lightest gray that works for body text on white. Brand colors behave the same way: white text on indigo #6366F1 is 4.46:1, a fail for normal text, while the darker #4F46E5 gives 6.28:1.

If the brand color cannot change, keep it for large text and UI elements where 3:1 applies, and pick a darker step from the shades generator for body text. The same tool also reports an APCA Lc value; the APCA contrast checker page explains how to read it.