Contrast Ratio Calculator (WCAG 2.2 colour contrast checker, AA & AAA)

Understanding the contrast ratio calculator — concept and principle

Text that is too pale against its background is hard to read, especially for people with low vision. The Web Content Accessibility Guidelines (WCAG) set minimum contrast ratios. This calculator measures the ratio between a text colour and a background colour and checks it against the AA and AAA levels for normal text, large text and interface components.

#767676 on white is 4.54:1, the lightest grey that passes AA for normal text.

How it is calculated

Each sRGB channel c (0–1) is linearised: c ÷ 12.92 if c ≤ 0.04045, otherwise ((c + 0.055) ÷ 1.055)^2.4

Relative luminance L = 0.2126 R + 0.7152 G + 0.0722 B

Contrast ratio = (L lighter + 0.05) ÷ (L darker + 0.05), from 1:1 to 21:1

Thresholds: AA normal text 4.5:1, AA large text 3:1, AAA normal 7:1, AAA large 4.5:1, non-text UI 3:1

The ratio is shown rounded down, because a value just below a threshold fails.

The principle

Screens encode colours non-linearly, so the values are first converted back to linear light. Luminance weights the channels by the eye's sensitivity, with green counting most. The ratio compares the light from the two colours; adding 0.05 to each accounts for ambient light reflecting off the screen, which keeps very dark colours from giving infinite ratios. Larger text has thicker strokes and stays legible at lower contrast, which is why its threshold is lower.

Worked example

Default inputs: text #767676 on background #FFFFFF.

0x76 = 118; 118 ÷ 255 = 0.4627, linearised = 0.1812, so L of the grey = 0.1812.
L of white = 1.
Ratio = (1 + 0.05) ÷ (0.1812 + 0.05) = 1.05 ÷ 0.2312 = 4.54, shown as 4.54:1.
AA normal text (4.5:1) ✓ passes; AA large text (3:1) ✓ passes.
AAA normal (7:1) ✗ fails; AAA large (4.5:1) ✓ passes; UI parts (3:1) ✓ passes.

How to read the result

#767676 is well known as roughly the lightest grey that still passes AA for normal text on white. AA is the level most laws and policies refer to. "Large text" means at least 18 pt (24 px) or 14 pt bold (about 18.7 px). Passing the ratio does not guarantee readability: font weight, size and background patterns also matter.

Common mistakes

Rounding 4.48:1 up to 4.5:1; WCAG does not allow rounding up.
Treating placeholder text or disabled controls as exempt without checking the rules.
Measuring text over images or gradients at only one point.
Forgetting focus indicators and icons, which need 3:1.

Keep in mind: Contrast is one part of accessibility. Test with real users and assistive technology, and follow the specific requirements that apply to your organisation.

Frequently asked questions

What contrast ratio is required for body text?

At least 4.5:1 for WCAG level AA; 7:1 for AAA.

What counts as large text?

At least 18 pt (24 px), or 14 pt (about 18.7 px) bold.

What is the highest possible ratio?

21:1, black on white.

Do logos need to meet contrast rules?

Text that is part of a logo or brand name is exempt under WCAG.

Sources: W3C, Web Content Accessibility Guidelines (WCAG) 2.2, success criteria 1.4.3, 1.4.6 and 1.4.11, and definitions of relative luminance, contrast ratio and large-scale text

Checked 9 Nov 2026. W3C Web Content Accessibility Guidelines (WCAG) 2.2, definitions of “relative luminance” (sRGB threshold 0.04045) and “contrast ratio”, success criteria 1.4.3 Contrast (Minimum), 1.4.6 Contrast (Enhanced) and 1.4.11 Non-text Contrast, and definition of “large scale” text.

Your numbers