Check text and background colors against WCAG 2.x AA and AAA, with a live preview and a passing color suggested.
The contrast ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 of the darker one, as defined in WCAG 2.x. Black on white is 21:1 and identical colors are 1:1. The page compares that ratio with these minimums: 4.5:1 for AA normal text, 3:1 for AA large text, 7:1 for AAA normal text, 4.5:1 for AAA large text and 3:1 for AA non-text parts such as icons and input borders. Large text means at least 18 point (24 px), or 14 point (about 18.7 px) in bold. For example, #767676 on white is 4.54:1, which passes AA for normal text but not AAA, while #777777 on white is 4.47:1 (4.478, cut to 2 decimals) and fails AA for normal text. Colors are entered as 3 or 6 hex digits without transparency.
Pass or fail is decided on the exact ratio, never on a rounded one. The number shown is cut to 2 decimals without rounding up, so a shown 4.50 always passes. The WebAIM contrast checker also cuts rather than rounds. For example, #006FFB on white has a ratio of about 4.4999. A rounded display would say 4.50:1 and look like a pass, but it is below 4.5 and fails AA for normal text. This page shows 4.49:1 and Fail. WCAG does not allow rounding up to meet a threshold, so a color that misses by a hair is still a miss.
When the ratio is below your target, AA 4.5:1 or AAA 7:1, the page looks for the nearest text color that reaches it. It keeps the hue and saturation of your text color and moves its lightness darker and then lighter in steps of a quarter of a percentage point, checking the real contrast of each candidate color. The first one that reaches the target is shown as a swatch, with its ratio. Click a swatch to copy its hex code. A direction is left out when no shade can reach the target, for example lighter text on a white background. The suggestion changes only the text color. If the brand color must stay, change the background instead.
WCAG 2.x contrast looks at two flat colors. It does not judge fonts, thin strokes, text over images or gradients, hover and focus states, or color blindness, and a passing ratio does not make text easy to read on its own. APCA, a different contrast method proposed for the WCAG 3 drafts, gives different numbers, and this page does not use it. Nothing you type is stored or uploaded; the work happens in your browser.
AA needs at least 4.5:1 for normal text and 3:1 for large text, which is 18 point or 14 point bold. Icons, chart lines and input borders need 3:1. Gray #767676 on white is the lightest gray that passes 4.5:1, at 4.54:1.
AAA is stricter: 7:1 for normal text and 4.5:1 for large text, against 4.5:1 and 3:1 for AA. Black text on white is 21:1 and passes both. Gray #595959 on white is 7.0:1 and is about the lightest gray that passes AAA for normal text.
This page cuts the ratio to 2 decimals instead of rounding, as the WebAIM checker does, and compares the exact value with 4.5. A ratio of 4.4999 is a fail, so showing 4.50 would mislead. If another tool rounds, it may show a pass for that color.
Look at the two swatches under the preview. They keep your hue and move the text darker or lighter until it reaches 4.5:1, or 7:1 if you picked AAA. For #999999 on white (2.85:1) the darker suggestion is #767676, at 4.54:1. Click a swatch to copy the hex code.
No. It compares two flat colors. For text over a photo or a gradient, check the worst spot, meaning the pair of colors where the text is hardest to read, or put a solid color behind the text. The page does not read transparency either: hex codes with 8 digits are refused.
No. The ratio is worked out in your browser and nothing is uploaded or stored. Page visits are counted with Google Analytics, never the colors you enter.