Contrast checker
Runs entirely in your browser. Your files and data never leave your device.
| AA, normal text | Pass |
|---|---|
| AA, large text | Pass |
| AAA, normal text | Pass |
| AAA, large text | Pass |
About this tool
A contrast checker compares two colors, a foreground and a background, and tells you whether text set in them is readable. It computes the WCAG contrast ratio and checks it against the four standard thresholds: AA for normal text, AA for large text, AAA for normal text, and AAA for large text. Pick colors with the pickers or type hex codes directly, and watch the live preview update.
How is the ratio calculated?
The tool follows the WCAG 2 formula exactly. Each color’s sRGB channels are linearized (undoing the gamma curve monitors apply) and combined into a relative luminance using the standard weights of 21.26% red, 71.52% green, and 7.22% blue, reflecting how sensitive human vision is to each channel. The lighter of the two luminances is then compared to the darker one, with a small constant added to both to account for ambient light, giving a ratio between 1:1 (identical colors) and 21:1 (pure black on white). That ratio gets checked against four cutoffs: 4.5:1 for AA normal text, 3:1 for AA large text, 7:1 for AAA normal text, and 4.5:1 for AAA large text. Only 3 and 6-digit hex colors are accepted; the calculation doesn’t need alpha or other notations since it always compares two fully opaque colors.
Is my data uploaded anywhere?
No. The whole calculation runs in your browser with a few lines of math, nothing is sent to a server. The colors you check never leave your machine, so it’s fine to test brand colors from an internal design system or a client’s palette without sending them anywhere.
What counts as large text under WCAG?
WCAG defines large text as 18pt (24px) regular weight or 14pt (18.66px) bold and up, which is why it gets a looser threshold than body copy: bigger, heavier strokes stay legible at lower contrast. Use it to confirm body text meets WCAG AA before shipping a design, check whether a button’s label is legible against its background, or audit an existing site’s color palette for accessibility issues. See the W3C’s understanding contrast minimum guidance for the exact formula and the reasoning behind the thresholds, or the WebAIM contrast checker article for a plain-language walkthrough.