Your brand color is a soft teal, or a warm orange, or a pastel pink that looked lovely in the logo file. Then a scanner flags dozens of contrast errors across the site, and suddenly the designer, the marketing manager and the developer are all arguing about the same hex code.
WCAG color contrast failures turn up on a great many business websites, and they are among the easier problems to fix. This post explains the ratios WCAG asks for, which parts of a page they apply to, how to measure them, and how to keep a brand palette while still meeting them. Color blindness and the use of color alone to carry meaning are a related but separate topic, covered in our guide to designing for color blindness.
What a contrast ratio is
A contrast ratio compares how light one color is against another. It runs from 1:1 (the same color on itself, invisible) to 21:1 (black on white). The calculation uses the relative brightness of each color, not the hue, which is why two very different colors, such as a medium red and a medium green, can have almost no contrast between them.
You never need to do the math by hand. Every contrast tool calculates it from two color values. What you do need to know is which number applies to which part of the page.
WCAG color contrast requirements by element
Two Level AA success criteria set the contrast ratio requirements for most of what you see on a business site.
Text: 1.4.3 Contrast (Minimum)
- Normal-sized text: 4.5:1 or higher, measured against whatever sits directly behind it. This covers body copy, menu links, button labels, form labels, footer text, captions and the small print under a price.
- Large text needs at least 3:1. WCAG counts text as large from 18 point, or 14 point if bold, which works out to roughly 24 CSS pixels regular or about 18.7 pixels bold. Headings and big display text usually qualify; body text almost never does. If you are unsure, aim for 4.5:1.
There are exceptions. Text in a logo or brand name does not have a contrast requirement. Text that is purely decorative, or part of a photo where it is incidental, such as a street sign in the background, is exempt. Text on a control that is genuinely inactive, like a disabled button, is also exempt, though it still helps if people can tell it is disabled.
Controls and graphics: 1.4.11 Non-text Contrast
This one surprises people. Things that are not text also need contrast of at least 3:1 when you need to see them to use the page or understand it:
- The border of a text field, if the border is the only thing that shows where the field is.
- Checkboxes, radio buttons and toggle switches, including their checked state.
- Icon-only buttons, such as a search magnifier, a hamburger menu or a cart icon.
- Focus indicators and other visual states, compared with the colors around them.
- Parts of charts and diagrams needed to understand them, such as lines on a graph.
A very light gray input border on white is the most common failure here. So is a ghost button with a thin pale outline. The visible keyboard outline is part of this as well; we cover how to style it properly in our post on visible focus.
Where business sites usually fail
On WordPress sites, the same handful of spots tend to fail:
- Light gray body text. Many themes ship with mid-gray paragraphs because they look elegant in the demo. They often fall short of 4.5:1.
- White text on brand-colored buttons. Bright yellows, oranges, light greens and light blues rarely give white text enough contrast.
- Placeholder text in forms. Usually very pale, and when it is the only label, it counts as text that must meet 4.5:1.
- Link colors. A link has to contrast with the background, and if color is the only thing marking it as a link, it also needs to stand out from the surrounding text.
- Hover and focus states. A button that passes normally might fail when it lightens on hover.
- Text over images and video. A headline over a hero photo may pass on one part of the image and fail on another, or fail completely on a phone where the crop changes.
- Footer and cookie banners. Small text on dark gray or on a tinted bar, which nobody tested because nobody reads it.
How to check contrast yourself
You do not need special software to check WCAG color contrast. A few free tools cover almost everything:
- Run a page scan. The free WAVE checker marks contrast errors on the page itself and shows the ratio for each. The axe DevTools extension and the accessibility section of Lighthouse report them too.
- Check the gaps. Scanners cannot measure text over images, gradients, or states that only appear on hover, focus or after an interaction. For those, use a color picker. Most browser developer tools have one that shows the ratio when you inspect an element, and there are free contrast checker tools from accessibility organizations such as WebAIM.
- Sample the worst part of an image. For text over a photo, pick the lightest area behind light text, or the darkest area behind dark text. That is the ratio that counts.
- Test the states. Hover over buttons, tab to them, check a checkbox, trigger a form error. Measure each state that changes color.
- Check on a phone. A layout that places text over a different part of the image on mobile can fail where desktop passed.
Record the colors and ratios you find. A simple list of “element, foreground, background, ratio, pass or fail” is all you need to brief a designer or developer.
Fixing brand colors without losing the brand
This is where most of the arguments happen, and they are usually easier to settle than people expect. You almost never have to abandon a brand color. You have to decide where each shade is used.
Build an accessible palette around the brand color
Keep the original brand color for things that have no contrast requirement or only need 3:1: logos, large headings, decorative shapes, illustrations, thick borders and background panels with dark text on them. Then create a darker version of the same hue for small text, links and buttons with white labels. Many brands end up with two or three shades of their main color, each with a clear job.
Swap the text color instead of the background
If a bright orange button with white text fails, try dark text on the same orange. Dark gray or near-black on yellow, orange, light green or light blue often passes easily and still looks like the brand.
Fix text on images properly
For hero sections, there are three reliable options. Add a solid or semi-opaque dark overlay between the image and white text. Put the text on a solid colored panel that sits over the image. Or move the text off the image entirely, below it on mobile. A thin text shadow sometimes helps, but it is easy to get wrong, so measure the result rather than assuming.
Fix it once, in the theme
On WordPress, set the colors in the theme’s global styles or customizer, and in the theme’s CSS, not page by page. Page builders let editors pick any color for any block, which is how contrast failures creep back in. Limit the palette available to editors to colors that pass, and the problem largely stops recurring.
Sometimes the palette is so far off that a refresh makes more sense than patching. When contrast problems come together with an outdated theme and layout issues, the accessible website redesign page describes how to build accessibility in from the design stage.
Contrast beyond the minimum
Passing 4.5:1 is a minimum, not a goal. Readers on phones in sunlight, older visitors and anyone with low vision benefit from more. If your body text sits right on the line, a slightly darker shade costs nothing and helps a lot of people. WCAG’s Level AAA asks for considerably higher contrast for text, and although that sits outside an AA target, it is a reasonable aim for body copy where your design allows it.
Also remember that contrast is only one part of readability. Font size, weight and line spacing matter too. A thin font at a small size can be hard to read even at a passing ratio.
Contrast is one of the criteria in the full set of 2.2 AA requirements, and an easy place to start. How audits, fixes and monthly checks fit together is covered on our website accessibility services page.
Frequently asked questions
What contrast ratio does WCAG AA require?
At Level AA, ordinary text has to reach 4.5:1 with the color behind it, while large text may go as low as 3:1. Visual parts of controls and meaningful graphics, such as input borders, icon buttons and chart lines, also need at least 3:1 against the colors next to them.
Does my logo need to meet contrast requirements?
No. WCAG exempts text that is part of a logo or brand name from the text contrast requirement. That said, if the logo is also your home link, it helps everyone if it stands out clearly. The exemption also does not extend to the rest of your brand colors used in text and buttons.
Can a scanner check all contrast issues?
No. Scanners measure plain text on solid backgrounds well, but they struggle with text on images and gradients, and they usually do not test hover, focus or error states. Use a scanner for the bulk, then a color picker for images, states and anything the scanner marks as needing review.
Is dark mode or a contrast toggle a fix for low contrast?
Not on its own. A toggle can be a helpful extra, but the default view people see first still needs to meet the requirements. Overlay widgets with contrast buttons do not change the underlying design. Fixing the colors in the theme is the reliable answer.
Contrast is usually one of the quicker wins in an audit. If you want every template, state and form checked properly alongside the rest of WCAG, with the colors and ratios written down for your designer, our WCAG audit includes it.
Next in this series: WCAG Focus Indicator: Visible Focus That Works
