What is a color contrast ratio?
A color contrast ratio is a number from 1:1 to 21:1 that compares how light two colors are, as defined by the Web Content Accessibility Guidelines (WCAG) 2.x. 1:1 means two identical colors; 21:1 is black on white. Low contrast makes text hard to read for people with low vision, color vision deficiencies, older eyes, or anyone shopping on a phone in sunlight.
The ratio only depends on relative luminance, not on hue, so two colors that look very different (red and green, for example) can still have almost no contrast.
The WCAG contrast formula
Relative luminance (L) is the brightness of a color on a scale from 0 (black) to 1 (white). WCAG 2.2 defines it in three steps:
- Divide each sRGB channel by 255:
c = R / 255(and the same for G and B). - Linearize each channel: if
c <= 0.04045, thenc / 12.92; otherwise((c + 0.055) / 1.055) ^ 2.4. - Weight the channels:
L = 0.2126 R + 0.7152 G + 0.0722 B.
The contrast ratio is then (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color. Older texts give the threshold as 0.03928 instead of 0.04045. For 8-bit colors (00 to FF) the two give exactly the same result, because no channel value falls between them.
Worked example: gray #767676 text on white. 0x76 is 118, and 118 / 255 = 0.4627. Linearized: ((0.4627 + 0.055) / 1.055) ^ 2.4 = 0.1812. All three channels are equal, so L = 0.1812. White has L = 1. Ratio = (1 + 0.05) / (0.1812 + 0.05) = 1.05 / 0.2312 = 4.54:1, which passes AA for normal text. One step lighter, #777777 gives 4.478:1 (shown as 4.47:1) and fails. WCAG does not allow rounding up, so it fails even though it rounds to 4.5.
WCAG contrast thresholds
| Criterion | Applies to | Minimum ratio |
|---|---|---|
| 1.4.3 Contrast (Minimum), AA | Normal text | 4.5:1 |
| 1.4.3 Contrast (Minimum), AA | Large text | 3:1 |
| 1.4.6 Contrast (Enhanced), AAA | Normal text | 7:1 |
| 1.4.6 Contrast (Enhanced), AAA | Large text | 4.5:1 |
| 1.4.11 Non-text Contrast, AA | UI components and meaningful graphics | 3:1 |
Large text means at least 18 point (24 CSS pixels) at regular weight, or at least 14 point (about 18.66 CSS pixels) in bold. One point is 4/3 of a CSS pixel. Anything smaller is normal text, so a 20px regular product subtitle needs 4.5:1.
Non-text contrast (1.4.11) covers the parts you need to see to use a control: a button's edge against the page, an input's border, a checkbox, a focus indicator, or an icon that carries meaning. It asks for 3:1 against the adjacent colors. Text inside a button is still checked as text against the button fill.
Some things are exempt: logos and brand names, purely decorative text, text in a picture that is not meant to be read, and disabled (inactive) controls. Most sites that aim for WCAG AA target the AA rows; AAA is a stricter goal.
Where contrast fails on Shopify stores
- Sale and "sold out" badges. White text on a light red, coral or pastel badge is common. White on
#FF6B6Bis 2.77:1, which fails even the 3:1 large text level. - Light gray text. Compare-at prices, vendor names, review counts, placeholder text in inputs and footer links are often set in a pale gray to look subtle. On white,
#9CA3AFis 2.53:1. - Text and buttons on images. Hero banners and slideshows put white text over photos. Check the text against the lightest part of the image behind it, or add a solid or semi-opaque overlay.
- Announcement bars. Brand colors chosen for looks, such as white on a mid orange or yellow, often fall below 4.5:1 at the small size these bars use.
- Outline buttons and form fields. A thin light gray border on a white page can fail the 3:1 non-text rule, and so can a faint focus outline.
To check a theme color, open the theme editor, copy the hex value from Theme settings, Colors, and paste it here. If a pair fails, the tool suggests the closest text color with the same hue that passes AA.
Contrast is one WCAG criterion among many
Passing contrast does not make a page accessible on its own. WCAG 2.2 has dozens of success criteria at level AA, including text alternatives for images, keyboard access, visible focus, form labels, captions and clear error messages. An automated check (this tool included) covers only part of WCAG; many criteria need a person to test with a keyboard and a screen reader. Use contrast as one item in a wider review, such as the WCAG checklist for Shopify.
Frequently Asked Questions
What contrast ratio does WCAG require?
For level AA, normal text needs at least 4.5:1 and large text at least 3:1 (success criterion 1.4.3). For level AAA, normal text needs 7:1 and large text 4.5:1 (1.4.6). User interface components and meaningful graphics need 3:1 against adjacent colors (1.4.11).
What counts as large text?
Text of at least 18 point (24 CSS pixels) at regular weight, or at least 14 point (about 18.66 CSS pixels) in bold. Everything smaller counts as normal text and needs the higher ratio.
Can I round 4.47:1 up to 4.5:1?
No. WCAG treats the thresholds as exact minimums, so 4.47:1 fails AA for normal text. This checker shows the ratio cut off at two decimals and decides pass or fail on the exact value.
Why does the formula use 0.04045 and not 0.03928?
WCAG 2.2 uses the 0.04045 threshold from the sRGB standard; older texts printed 0.03928. For ordinary 8-bit colors both give identical results, because no channel value (0 to 255 divided by 255) falls between the two numbers.
How do I check text on top of an image?
Measure the text color against the lightest area of the image behind it for light backgrounds, or the darkest area for dark ones. If the ratio changes across the image, add a solid or semi-opaque overlay behind the text so the worst case still passes.
Does passing color contrast make my store WCAG compliant?
No. Contrast is one success criterion among many. Alt text, keyboard access, focus, labels and captions all matter too, and automated checks cover only part of WCAG, so a manual review is still needed.
