The quick brown fox jumps over the lazy dog.
AaBbCcDdEeFf 0123456789 - preview text in this color pair.
What it does
Computes the WCAG 2.2 contrast ratio between a foreground and a background color and judges it against the accessibility thresholds: AA for normal text (≥ 4.5:1), AA large for large text (≥ 3:1), and AAA (≥ 7:1). The math is the real relative-luminance formula - each sRGB channel is linearized, combined with the WCAG coefficients, and the ratio is (lighter + 0.05) / (darker + 0.05).
It accepts #rgb and #rrggbb hex colors (case-insensitive, with or without the leading #), shows pass/fail badges for all three thresholds at once, and renders a live preview panel - a pangram and a glyph/number line painted in your exact color pair. 100% client-side.
How to use it
- Set the Foreground color: click the swatch to open a color picker, or type a hex value in the text field.
- Set the Background color the same way. The tool opens on
#e9e9f1on#07070b, a pair that passes AAA by design. - Click Swap to exchange the two colors - useful for checking both dark-on-light and light-on-dark variants of a theme.
- Read the result: the ratio (2 decimals) plus the three badges AA, AA large, AAA, each green (pass) or red (fail).
- Check the preview block beneath - your text rendered in the chosen pair - to judge it with your own eyes.
- If either value is not a valid hex color, the tool shows an error and hides the results until you fix it.
Examples
Verified by running contrastRatio() from src/lib/color.ts (the exact function the tool uses):
#e9e9f1 on #07070b 16.65:1 AA pass · AA large pass · AAA pass (tool defaults)
#ffffff on #000000 21.00:1 AA pass · AA large pass · AAA pass (the maximum)
#f8fafc on #1e293b 13.98:1 AA pass · AA large pass · AAA pass
#abc on #000000 10.69:1 AA pass · AA large pass · AAA pass (3-digit shorthand works)
#767676 on #ffffff 4.54:1 AA pass · AAA fail (the classic "just barely AA" gray)
#777777 on #ffffff 4.48:1 AA fail · AA large pass (one notch darker fails AA)
#3b82f6 on #ffffff 3.68:1 AA fail · AA large pass (Tailwind blue-500 on white)The #767676 vs #777777 pair shows why exact math beats eyeballing: a 1-unit hex difference crosses the 4.5:1 AA line.
Good to know
- Private: all math runs in your browser; nothing is sent anywhere.
- Named colors (
red,white) and other CSS color formats are rejected - hex only. Enter#rgbor#rrggbb. - There is no separate AAA-large badge; the tool shows AA (normal), AA large, and AAA (normal) exactly as coded.
- The ratio is symmetric - swapping fg/bg never changes the number, only which direction you read the preview.
- Related tools: Color Picker & Converter, Color Palette Generator, CSS Gradient Generator