Color contrast checker for WCAG AA and AAA.

Contrast ratio is the measure WCAG uses to decide whether text stands out enough from its background to be read by people with low vision or colour-vision deficiencies, on dim screens and in bright sunlight. It runs from 1:1, where the colours are identical, to 21:1, black on white.

The ratio compares relative luminance, the perceived brightness of each colour. Each sRGB channel is converted from 0 to 255 into a linear value, then weighted by how sensitive the eye is to it: L = 0.2126 R + 0.7152 G + 0.0722 B. Green dominates, which is why yellow looks bright and blue looks dark at the same saturation. The ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter colour. Hue does not enter the formula, so red text on a green background of the same luminance scores close to 1:1 however different they look.

WCAG 2.2, the current W3C recommendation, keeps the same contrast rules as WCAG 2.0 and 2.1. Success criterion 1.4.3 (level AA) requires 4.5:1 for normal text and 3:1 for large text. Success criterion 1.4.6 (level AAA) raises those to 7:1 and 4.5:1. Large text means at least 18 point (24 CSS pixels) or 14 point bold (about 18.66 CSS pixels).

Success criterion 1.4.11, Non-text Contrast (AA), asks for 3:1 between user-interface parts and their surroundings: input borders, checkboxes, focus indicators, icons that carry meaning and the lines and segments of charts. The UI row above tests exactly this.

Some things are exempt: logos and brand names, purely decorative content, text in pictures that are incidental, and disabled controls. Exempt does not mean ignored: a faint disabled button still needs to be recognisable as a button.

No. WCAG thresholds are exact, so 4.49:1 fails AA even though it rounds to 4.5. This checker truncates the displayed ratio to two decimals instead of rounding, and tests pass or fail against the exact value, so a borderline pair is never reported as passing when it does not.

The classic example is grey text on white. #767676 gives 4.54:1 and passes AA, the lightest neutral grey that does. #777777, one step lighter, gives 4.47:1 and fails. If your design sits within a few hundredths of a threshold, choose the next darker shade so small rendering differences cannot tip it over.

The suggestions here keep your colour's hue and saturation and move only its lightness, toward black on light backgrounds or toward white on dark ones, until the pair reaches 4.5:1 for AA or 7:1 for AAA. The result is the closest passing shade, so it still reads as your brand colour.

Mid-tone brand colours, especially light blues, oranges, yellows and greens, often score 2:1 to 4:1 on white. A robust pattern is to keep the vivid shade for large headings, illustrations and backgrounds, and use a darker shade from the same family for body text and links. Build both into your design system as named tokens, such as brand-500 for fills and brand-700 for text, so nobody has to recheck contrast for every new screen.

The WCAG 2 formula is simple and widely adopted, but it is known to misjudge some pairs. It tends to overstate contrast between dark colours and can rate white text on saturated mid-tones, such as orange, lower than many readers perceive it.

APCA, the Accessible Perceptual Contrast Algorithm, was developed to address this. It is polarity-aware, so dark-on-light and light-on-dark score differently, and it takes font size and weight into account, reporting a lightness contrast value (Lc) instead of a ratio. APCA was explored for WCAG 3, but WCAG 3 is still a working draft and its current draft does not settle on a contrast method. APCA is not a conformance requirement anywhere today.

For compliance, use the WCAG 2.x ratio, which is what this checker computes. It is fine to use APCA as an extra design check, as long as your colours still pass WCAG 2.2.

Accessibility laws and standards in many regions point to WCAG 2.x level AA, which includes the 4.5:1 and 3:1 contrast rules. Examples include Section 508 for US federal technology, EN 301 549, the standard behind the European Accessibility Act that has applied to many products and services sold in the EU since June 2025, the UK's public sector accessibility regulations, and India's GIGW guidelines for government websites. Courts and regulators elsewhere use WCAG as the benchmark too.

Contrast is one of the most common failures in automated audits, and one of the cheapest to fix early. Our WCAG 2.2 accessibility testing checklist covers the rest of an audit, and the web accessibility glossary entry explains the principles behind it.

Text over images or gradients: test the lightest and darkest areas the text can sit on, and add an overlay or text shadow if any area fails. Semi-transparent colours: blend the colour over its actual background first and test the resulting solid colour, since this checker takes opaque hex values. Dark mode: check every pair again in the dark theme, because a colour that passes on white rarely passes on near-black unchanged.

Do not forget states. Hover, focus, visited links, placeholder text, error messages and selected tabs are all text or UI that someone needs to read. WCAG 2.2 also added Focus Appearance (2.4.13, AAA), which asks for a focus indicator with 3:1 contrast between its focused and unfocused states.