Accessible Website Colors: How to Choose and Check Contrast
Accessible website colors have enough contrast between text and background, do not use color alone to carry meaning, and keep buttons, icons and focus outlines visible. The widely used accessibility rules measure contrast as a ratio from 1:1 to 21:1, and you can check any pair of colors with a free contrast tool in a few seconds.
Why contrast matters
Contrast affects everyone. People with low vision or color blindness depend on it, but so does anyone reading a phone in sunlight, on a dim screen or at the end of a long day. Low contrast looks stylish in a design file and fails in real life. It is also part of the accessibility guidelines that many organizations and laws refer to, so it is worth getting right early.
What contrast ratio means
Contrast ratio compares the brightness of two colors. A value of 1:1 means no difference, such as white on white, and 21:1 is the maximum, black on white. Swapping the foreground and background does not change the ratio. Colors are usually written as hex codes, RGB or HSL values, and changing a color's lightness changes its contrast. Transparency also lowers contrast, because the color underneath shows through.
The common targets
The Web Content Accessibility Guidelines define levels of conformance. The one most sites aim for is level AA.
| Element | Level AA | Level AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text | 3:1 | 4.5:1 |
| Interface parts and meaningful graphics | 3:1 | Not defined separately |
The rules also say you cannot round a ratio up to meet a target. A pair that measures slightly below the line does not pass. Some things are exempt, including text that is purely decorative, inactive controls and logos, but it is safer to choose readable colors anyway.
It is not only body text
- Buttons and form fields. The outline or background of a field must stand out from the page.
- Icons that carry meaning need enough contrast with their background, unless a text label already says the same thing.
- Focus outlines. People who use a keyboard rely on a visible outline to see where they are. If you restyle it, keep the contrast high.
- Hover and active states must meet the same standards as the normal state.
Do not rely on color alone
A fundamental rule is that color must not be the only way to show meaning. A form that marks errors only with a red border leaves color-blind visitors guessing. A chart whose categories differ only by hue is hard to read. Add words, icons, patterns or underlines. For links inside text, an underline is the simplest cue, because links that differ only by color need extra contrast with the surrounding text and an additional cue when focused or hovered.
Where designs go wrong
- Text over photos. Contrast changes across the image. Add a solid or semi-dark overlay, or move the text to a calm area.
- Gradients. Test the text against the lowest-contrast point.
- Light grey on white. A very common choice for captions and placeholders, and often too faint.
- Brand colors. A bright brand color may work for decoration but fail as text. Use a darker shade for text and keep the bright one for large shapes.
How to check
- Pick the text color and the background color from your design.
- Enter both into a free contrast checker and read the ratio.
- Test each state: normal, hover, focus and disabled.
- For gradients and photos, test the weakest spot.
- Look at the page in grayscale to see whether anything important disappears.
Browser developer tools can also report contrast for any element you select. Make the check part of choosing a palette, not a last-minute fix. The same care applies to text styles, as covered in the typography guide.
Dark mode
If you offer a dark version of the site, check it separately. Pure white text on pure black can be harsh, and brand colors may behave differently. Dark mode is not automatically more accessible, so apply the same tests to both versions.
Building a palette that passes from the start
It is easier to choose accessible colors at the beginning than to repair them later. Start with a very dark and a very light neutral, which will carry most of your text and backgrounds. Add one main brand color and test it against both neutrals. If it only works with one, use it only in that pairing. Then choose a darker version of the brand color for links and small text, and keep the bright version for large shapes, buttons with dark text and decoration. Write the approved pairs down so everyone who works on the site uses the same combinations.
A quick example
A pale yellow button with white text looks fresh and fails the check, because the two colors are too close in brightness. Switching to dark text on the same yellow gives a much higher ratio without changing the brand feel. The fix did not need a new palette, only a different pairing, which is why testing each pair matters more than judging colors one by one.
Common mistakes
- Testing only the primary text and forgetting captions, footers and form hints.
- Marking required fields or errors with color alone.
- Choosing colors on a bright, calibrated monitor and never viewing them on a phone outdoors.
- Relying on a browser extension once and never rechecking after redesigns.
FAQ
Do logos need to meet contrast rules?
Logos are exempt from the text contrast requirement, but a logo that disappears on its background does not help your brand.
Is dark mode more accessible?
Not automatically. Some people find it easier, others harder. Test both modes.
What contrast should placeholder text have?
Placeholder text is still text people need to read, so it should meet the same ratio as other text. Better still, use visible labels instead of relying on placeholders.
How do I check contrast on an image background?
Test against the busiest and lightest or darkest areas behind the text, or add an overlay to make the background even.
Which level should a small site aim for?
Level AA is the common baseline. Reaching it also makes the site pleasant for everybody. For other accessibility steps, see the navigation guide.
Your next step: pick your three most used text and background pairs, enter them into a contrast checker and fix the weakest one first.