Contrast Checker

This contrast checker tells you whether text in one color is readable on another, and gives you the WCAG 2.2 pass or fail for each case. It is for developers fixing accessibility audit findings, designers picking brand colors and testers writing up reports.

Enter a text color and a background in any CSS format. You get the contrast ratio, AA and AAA results for normal text, large text and UI parts, and the newer APCA score. If the pair fails, the tool finds the nearest color that passes by changing only its lightness, so your blue stays blue.

Everything runs in your browser. Once you have a passing color, you can convert it to HSL or OKLCH for your stylesheet.

WCAG compares the relative luminance of two colors as a ratio. It runs from 1:1 for identical colors to 21:1 for black on white. Each threshold belongs to a success criterion (SC).

• SC 1.4.3, AA: 4.5:1 for normal text, 3:1 for large text.
• SC 1.4.6, AAA: 7:1 for normal text, 4.5:1 for large text.
• SC 1.4.11, AA: 3:1 for UI parts such as input borders, focus rings and icons you need to see.
• Large text means at least 24px, or 18.67px when bold.

For perception, often yes. For compliance, no. The WCAG 2 formula gives the same ratio whichever color is the text, and it tends to overrate dark pairs.

APCA (Accessible Perceptual Contrast Algorithm) models how people see lightness on screens, so swapping text and background changes the score. Black on white is about Lc 106 and white on black about Lc -108. Roughly, Lc 75 suits body text, Lc 60 larger content text and Lc 45 headlines. APCA is not part of WCAG 2.2, so use the ratio for audits and APCA as a second check, especially in dark themes.

Yes, and by a lot. A translucent color has no contrast of its own. Black text at 50% opacity on white is really #808080, which gives about 3.9:1 and fails AA for body text.

This tool blends a translucent background over a white page, then the text over that background, rounding to the 8-bit values a screen uses. The blended colors are listed under the preview.

It keeps hue and chroma in OKLCH and steps the lightness both lighter and darker. The passing option closer to your original wins. If the new color falls outside sRGB, chroma drops just enough to fit, and you are told. If no lightness works, change the other color or raise the text opacity. When you need matching shades for the rest of your UI, build a palette around the fixed color.