# Color Contrast: WCAG Ratios and How to Check Them Source: https://allyway.ai/glossary/color-contrast Color contrast is the difference in brightness between text or interface elements and their background, measured as a ratio from 1:1 to 21:1. WCAG requires at least 4.5:1 for normal text and 3:1 for large text. Color contrast is how much text and interface elements stand out from their background. WCAG measures it as a ratio from 1:1 (no difference, e.g. white on white) to 21:1 (black on white). The higher the ratio, the easier the text is to read. ## What it means Low contrast is one of the most common accessibility errors on the web. Light gray text on a white background may look elegant on a designer's high-end monitor, but on a cheap laptop, in sunlight, or for someone with low vision it becomes hard or impossible to read. [WCAG 1.4.3 Contrast (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) is a Level AA requirement of [WCAG 2.2](https://allyway.ai/regulations/wcag-2-2) – the level that laws such as the [European Accessibility Act](https://allyway.ai/regulations/eaa) expect through [EN 301 549](https://allyway.ai/regulations/en-301-549). It sets these minimum ratios: | What | Minimum ratio | |---|---| | **Normal text** | 4.5:1 | | **Large text** – from 24px, or 18.66px bold | 3:1 | | **Logos and brand names** | No requirement | | **Disabled buttons and purely decorative text** | No requirement | The stricter Level AAA (WCAG 1.4.6) asks for 7:1 for normal text and 4.5:1 for large text. For icons, form field borders and focus indicators, WCAG 1.4.11 requires at least 3:1 against the surrounding colors. > **Note:** > **Contrast is about brightness, not hue** > Red and green can look very different, yet have almost the same brightness – and a nearly identical ratio. Always measure the ratio instead of trusting your eyes. ## Examples A classic borderline case: `#767676` on white has a ratio of 4.54:1 and passes. The slightly lighter `#777777` reaches only 4.48:1 and fails. ```html title="Example"

Free shipping from €50

Free shipping from €50

``` **Do:** Do Dark gray body text (`#333333` on white, 12.6:1) and placeholder text that also reaches 4.5:1. For text on photos, add a dark overlay behind the text. **Don't:** Don't Light gray placeholder text, white text directly on a bright photo, or brand colors used for small text without checking the ratio first. ## How to check color contrast 1. **Measure each color pair** – enter text and background color in a contrast checker. 2. **Check all states** – hover, focus, error messages and placeholder text count too. 3. **Check text on images** – measure against the lightest part of the image behind the text. 4. **Fix at the source** – change the colors in your design system or CSS variables, so every page benefits at once. ## Questions Q: What contrast ratio does WCAG require? A: At Level AA, normal text needs at least 4.5:1 and large text (from 24px, or 18.66px bold) at least 3:1. Icons, input borders and focus indicators need 3:1. Q: Does placeholder text need enough contrast? A: Yes. Placeholder text is text, so it must reach 4.5:1. Many default browser and theme styles fail this. Q: Do logos need to meet contrast requirements? A: No. Text that is part of a logo or brand name is exempt from WCAG 1.4.3. Q: How can I check my website's colors quickly? A: Enter any text and background color in the [free allyWay contrast checker](https://allyway.ai/free-wcag-contrast-checker) to see the ratio and whether it passes AA and AAA. To find low-contrast text across your homepage, run the [free WCAG scanner](https://allyway.ai/free-wcag-accessibility-scanner-for-websites). Q: Can allyWay fix color contrast automatically? A: Yes. allyWay finds text with too little contrast and [corrects the colors automatically](https://allyway.ai/automatic-accessibility-fixes-for-website), matched to your brand style. Because colors are a visible change, the fixes only go live after you approve them – no changes to your code or theme needed. [Start for free](https://app.allyway.ai/register) and see which contrast issues allyWay can fix on your website.