Written by Jane Smith · Reviewed by Alex Chen · July 28, 2026
Check if your color combinations meet WCAG accessibility standards for normal and large text.
Live Preview
This is how your text looks on this background.
The contrast ratio condenses the relationship between two colors into a single number. A value of 1:1 means the pair is identical, while 21:1 is the strongest possible pairing, black text on a white background. Everything in between describes how clearly one color separates from the other on screen. This page measures that separation for any foreground and background you choose, then grades it against the Web Content Accessibility Guidelines published by the W3C.
The default colors on this page are a good starting point: foreground #1a1a2e against background #ffffff. The near-black navy has a relative luminance of about 0.0115, while pure white sits at 1.0. Plugging those figures into the ratio formula gives (1.0 + 0.05) / (0.0115 + 0.05), which works out to roughly 17.0:1. That sits comfortably beyond the strictest AAA threshold, which is why the dark ink reads cleanly on white cards across the site.
Each box in the results panel lights up green with a checkmark when its pairing meets the corresponding bar, and red when it falls short.
Mid-gray #767676 on white is a fascinating case because it lands almost exactly on the boundary. Its luminance is roughly 0.181, producing a ratio of about 4.5:1. That earns a pass for AA normal text and AAA large text, yet fails AAA normal text, which demands 7:1. Designers often pick a gray like this for secondary captions, unaware that it barely clears the minimum.
Below the color inputs, a preview strip renders a sample sentence in your chosen foreground over your chosen background. Every adjustment to the hex fields or the pickers updates the swatch instantly, so you see the pairing as a reader would before you commit to it in a stylesheet or design file.
Relative luminance is computed from the sRGB color space using a gamma-correction step. Each channel is linearized with the W3C formula, then the three results are weighted 0.2126, 0.7152, and 0.0722 for red, green, and blue respectively. The two luminances are finally combined with the 0.05 offset on each side to avoid a divide-by-zero when the colors are identical.
Thresholds assume a typical monitor under ordinary viewing conditions. Real displays vary in brightness, and text rendered on top of photographs inherits whatever sits underneath. Aiming for 5.5:1 or higher when you target AA normal text leaves room for those variables, and the large-text exemption should never be used as an excuse for barely legible body copy.
The panel accepts one foreground and one background at a time, which suits a single decision. When you are auditing a whole theme, collect the pairs into a small table first: body text on the page background, headings on cards, links inside paragraphs, and so on. Work through the list one row at a time and record the ratio next to each, so the page acts as a scoring sheet rather than a one-off check.
WCAG also expects a visible focus outline around interactive elements and a minimum 3:1 separation between adjacent UI states, like a button fill and the surface it sits on. The ratio math is the same, so you can reuse this checker for those cases too: pick the outline color and the surrounding background, then read the result. Text remains the strictest case, so passing a text pairing usually means the same colors work for borders and fills.
Text placed on top of photographs inherits the colors beneath it, so a pairing that passes on a flat background can fail over a bright patch. A scrim, a semi-transparent dark layer, or a solid band behind the caption restores separation without changing the type itself. Test the worst case, not the average: sample the lightest area where the text will sit and run that pair through the checker.
A static pairing can pass every ratio and still fail in context: placeholder text, disabled buttons, hover states, and gradients all change the effective contrast. Use the checker as a floor rather than a verdict, and review the preview panel for the situations that matter most. Printed materials add another variable, since ink on paper reflects light differently than pixels on a screen. The page runs entirely in the browser, so the hex values you test never leave the device.