/01 Checking colour contrast against WCAG
Enter a foreground and background colour and get the contrast ratio, along with a pass or fail against each WCAG level. The ratio runs from 1:1 for identical colours up to 21:1 for pure black on pure white.
The thresholds that matter: 4.5:1 for normal body text at AA, 3:1 for large text at AA, and 7:1 for normal text at AAA.
/02 What counts as large text, and what contrast does not cover
Large text means at least 18.66px bold or 24px regular. Below that it is normal text and needs the higher ratio. User interface components and meaningful graphics need at least 3:1 against what sits next to them.
Passing the ratio is a floor, not proof of readability. Thin weights, low-quality rendering and small sizes can still be hard to read at a technically passing ratio, and colour alone should never be the only way information is conveyed.
/03 How the contrast ratio is calculated
Contrast is not about how different two colours look in hue. It compares their relative luminance, a brightness measure weighted the way human eyes work: green counts for about 72 percent of perceived brightness, red about 21 percent and blue only about 7 percent. The ratio is (lighter + 0.05) divided by (darker + 0.05), running from 1:1 for identical colours up to 21:1 for black on white.
That weighting explains results that surprise people. Toolspark's blue, #3B58E2, reaches about 5.7:1 against white, so white text on it passes AA for normal text. The brand yellow, #FFE066, manages only about 1.3:1 against white because yellow is almost as luminous as white, yet near-black text on that yellow scores around 13:1. This contrast checker does the calculation instantly for any pair you enter.
/04 WCAG 2.1, 2.2 and what comes next
The contrast rules have been stable for years. WCAG 2.1 and the newer WCAG 2.2 use the same thresholds: 4.5:1 for normal text and 3:1 for large text at level AA, 7:1 and 4.5:1 at AAA. Interface parts such as input borders, icons and focus indicators need 3:1 against their surroundings under a separate rule.
Those WCAG 2 thresholds are what legal accessibility requirements point to, including ADA cases in the United States and the European Accessibility Act, which has applied to many products and services since June 2025. A newer method called APCA is being explored for WCAG 3, but it is still a draft, so audits continue to measure with the ratios this tool reports.