The quick brown fox jumps over the lazy dog
WCAG 2 ratio
what's this?APCA
what's this?Nearest accessible color
Suggestions keep the original hue and saturation and move only lightness in OKLCH, so the fix is the smallest perceptual change that clears your target.
Saved pairs
Nothing saved yet. Saved pairs stay in this browser so you can return to them later.
WCAG 2 and APCA, side by side
Type any CSS color into either field, named colors and rgb() / hsl()
included, and the contrast updates live. Most checkers stop at a pass or fail. This one also
hands you a color you can actually use.
The WCAG 2 ratio
WCAG 2 scores a pair from 1:1 (identical) to 21:1 (black on white). Body text needs 4.5:1 for AA and 7:1 for AAA. Large text (24px, or 18.66px when bold) is held to a gentler 3:1 for AA and 4.5:1 for AAA. The grid above highlights the row that matches your current preview size and weight.
The APCA Lc value
APCA is the contrast method being developed for WCAG 3. Instead of a ratio it reports a lightness contrast (Lc) from 0 to about 106, and it accounts for text size and weight and for which color is on top. As a rough guide: Lc 90 is ideal for fine body text, 75 is the floor for body text, 60 suits larger or heavier text, 45 is for large or bold only, and 30 is the minimum for any meaningful text. It often disagrees with WCAG 2 on light text and on mid-tones, which is exactly why it is worth seeing both.
How the fix works
When a pair falls short, lowering or raising lightness is what actually changes contrast, while shifting hue or saturation mostly does not. So the fixer converts your color to OKLCH (a perceptually uniform space), holds the hue and chroma steady, and finds the closest lightness that clears your chosen target. You keep the character of the color and change no more than you have to. Sister tool: Color Converter.