Accessible Color Contrast: How to Choose Website Colors

Updated 10 November 2026 · Standard formula, shown below

To choose accessible colors for a website, check the contrast between each text color and its background, then make sure the combination meets an appropriate accessibility target. The Web Content Accessibility Guidelines (WCAG) use contrast ratios: at least 4.5:1 for most text and 3:1 for large text at Level AA.

Why color contrast matters

Text with weak contrast can be difficult to read, especially for people with low vision or color-vision deficiencies. Glare, dim screens, small text, and low-quality displays can make the problem harder for anyone. Strong contrast helps users distinguish text and important interface elements from their backgrounds.

Contrast is not the same as how different two colors look on a designer’s screen. It is calculated from their relative luminance, a measure of how much light a color reflects. A bright yellow and a saturated blue may look very different in hue yet still provide insufficient contrast for small text.

WCAG’s contrast criteria are minimums, not guarantees that every person will find a design comfortable. Aiming above the minimum can improve readability, particularly for dense content or small labels.

How contrast ratios work

A contrast ratio compares the relative luminance of the lighter color with that of the darker color. The result ranges from 1:1, where the colors have equal luminance, to 21:1, the maximum contrast between white and black. The ratio is not a percentage and does not measure differences in hue.

For WCAG calculations, each sRGB color channel is first converted from its encoded value to linear light. Relative luminance is then calculated using the red, green, and blue channels, weighted as follows:

L = 0.2126R + 0.7152G + 0.0722B

Here, R, G, and B are the linearized channel values, each from 0 to 1. To find the ratio, put the lighter luminance in the numerator and the darker one in the denominator: (L1 + 0.05) / (L2 + 0.05). The added 0.05 accounts for ambient light and helps avoid ratios that become misleading near black.

WCAG contrast targets

For WCAG 2.2 Level AA, the key thresholds are:

Normal text: at least 4.5:1. This generally includes text smaller than 18 points regular or 14 points bold.
Large text: at least 3:1. WCAG defines large text as at least 18 points regular or 14 points bold, approximately 24 CSS pixels or 18.67 CSS pixels respectively.
Important non-text controls and graphics: generally at least 3:1 against adjacent colors when the contrast is needed to identify a component or understand its state.

At Level AAA, the thresholds rise to 7:1 for normal text and 4.5:1 for large text. These targets apply to specified content and contexts; they do not mean every decorative graphic must meet a text contrast threshold. Check the applicable WCAG criterion rather than assuming one ratio covers every element.

How to choose and test colors

Set the background first. Choose the main page and component backgrounds, including cards, menus, and form fields.
Test actual text pairs. Check body text, headings, links, captions, placeholder text, and button labels against the background each one appears on.
Use the right threshold. Apply 4.5:1 for normal text, 3:1 for qualifying large text, and review non-text controls separately.
Adjust one color and test again. Darkening the text or lightening the background may help. Recheck every use of the changed color, because it can affect other combinations.
Test interface states. Check hover, focus, selected, disabled, error, and success states, as well as borders or icons that convey meaning.
Verify rendered content. Use a contrast checker for the color values, then inspect the live page. Transparency, overlays, gradients, images, and browser rendering can change the effective background.

For example, pure black on white has a ratio of 21:1 and easily clears the text thresholds. A medium gray on white may look acceptable at a glance but fail 4.5:1; the exact result depends on the gray’s color value. Never rely on a color name such as “dark gray”—test the actual hex, RGB, or other rendered values.

Common contrast problems and misconceptions

Color alone communicates meaning. A red error message and green success message may be indistinguishable to some users. Add text labels, icons, or another clear cue rather than relying on color alone. This is a separate accessibility concern from contrast.

Text sits on a photograph or gradient. A single contrast result may not represent the whole text area. Place a solid or sufficiently opaque panel behind the text, or test the lowest-contrast portions of the rendered background. A text shadow does not automatically make an otherwise poor pairing accessible.

Placeholder text is too faint. Placeholder text is still text and should be readable. Do not treat it as a substitute for a persistent field label, and check its contrast independently from the input border.

A passing ratio is treated as proof of accessibility. Contrast is important, but it does not assess font size, spacing, content clarity, keyboard access, or whether information is conveyed only by color. Automated checkers can also miss backgrounds or states they cannot reliably identify.

Beyond the minimum: practical design choices

Accessible contrast does not require every site to use black text on a white background. A restrained palette can include brand colors, muted panels, and dark themes, provided each functional color pairing is checked. If a preferred brand color fails against white, try it as a large decorative area with a darker text color, or reserve it for an accent that does not carry essential text.

Dark mode needs its own checks. Do not assume that inverting a light palette preserves contrast: a muted gray that works on white may disappear on a dark surface, while bright text can become uncomfortable against a nearly black background. Test each theme and its controls separately.

Contrast analyzers are useful for evaluating foreground and background values, but a complete review should include keyboard focus, enlarged text, zoom, and real content. Designers and developers can record approved color pairs as design tokens, reducing the chance that new pages introduce untested combinations.

Frequently Asked Questions

What is a good color contrast ratio for website text?
For WCAG 2.2 Level AA, use at least 4.5:1 for normal text and 3:1 for large text. Higher contrast can make reading easier, though user needs and the surrounding design still matter.

Does WCAG require black text on a white background?
No. WCAG sets contrast requirements, not a required color palette. Many foreground and background colors can pass if their calculated luminance contrast is high enough.

Do links need to contrast with the background?
Yes. Link text should meet the applicable text contrast threshold against its background. If links are identified by color alone within surrounding text, add another cue, such as an underline, so users can distinguish them without relying on color.

Do disabled buttons need the same contrast?
Some WCAG contrast requirements exempt inactive interface components. However, extremely faint disabled controls can still be difficult to understand. Make their state clear without making active and disabled controls confusingly similar.

Can an online contrast checker tell me if my website is accessible?
It can calculate contrast for the colors it is given, but it cannot judge every accessibility issue. Manually inspect backgrounds, images, component states, and whether color is the only way information is communicated.

Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.