How to Make Website Colors Accessible

To make website colors accessible, check text and non-text contrast against the right WCAG thresholds, and never use color as the only way to convey meaning. For WCAG 2.2 AA, ordinary text needs a contrast ratio of at least 4.5:1; large text needs 3:1. Specified interface component information and meaningful parts of graphics have a separate 3:1 non-text contrast requirement. Then review the actual rendered page, including images, gradients, and interaction states.

A contrast checker can help assess color pairs, but it cannot establish that a whole site conforms to WCAG. Color contrast is one part of accessibility: structure, keyboard use, screen-reader behavior, and other requirements need their own checks.

1. Inventory where color carries information

Walk through the pages and states people use. Include:

Body copy, headings, labels, and text inside buttons.
Text over photographs, gradients, colored panels, and other backgrounds.
Inline links, visited links, hover styles, keyboard focus indicators, and disabled states.
Form borders, required-field indicators, validation errors, and success messages.
Button and input boundaries where those boundaries are needed to identify a component.
Meaningful icons, chart marks, diagrams, maps, and status indicators.

Test each theme and state independently. A color pair that passes in a light theme may fail in dark mode, on hover, or when an error style appears. If a background image or gradient changes behind text, check the part with the least favorable contrast.

2. Apply the right contrast threshold

WCAG contrast is based on relative luminance, not how different two hues look. A red and green pair can have different hues and still have poor luminance contrast.

Use	WCAG 2.2 AA minimum
Ordinary text and images of text	4.5:1
Large-scale text and images of large-scale text	3:1
Visual information needed to identify applicable UI components and states, and meaningful parts of graphics	3:1 against adjacent color(s)

WCAG defines large text as at least 18 point regular or 14 point bold. That is approximately 24 CSS pixels regular or 18.5 CSS pixels bold. Check the rendered text size rather than guessing from a design image.

The ratios are exact boundaries. A result of 4.499:1 does not meet 4.5:1, even if a tool displays a rounded value. Aim above the minimum when possible, especially for thin or unusual font styles that can appear fainter in practice.

WCAG 2.2 AAA is stricter: 7:1 for ordinary text and 4.5:1 for large text. Treat that as an optional higher target, not the AA requirement.

WCAG 1.4.3 includes exceptions, such as inactive UI text, pure decoration, logotypes, and certain text in pictures containing significant other visual content. Apply exceptions narrowly; they do not excuse unrelated text or nearby non-essential content.

3. Do not make color the only cue

WCAG 2.2 Success Criterion 1.4.1 says: “Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.”

Links: underline inline links, or provide another persistent non-color cue that distinguishes them from surrounding text.
Errors: pair a red field border with a written error message, and associate the message with the relevant field. An icon can reinforce the message.
Charts: use labels, patterns, symbols, or line styles as well as color to distinguish series.
Status: show words or recognizable icons such as “Complete” or “Needs attention,” rather than relying on green and red alone.
Required fields: identify them in text or with a clearly explained symbol, not only a color change.

Ask: if someone cannot distinguish the hues, can they still tell what the item means or what action to take?

4. Measure the actual foreground and background

Choose a current digital contrast analyzer that reports the foreground/background ratio.
Measure the colors in the rendered page or verify that the design tokens match what the browser actually renders.
Compare the result to the applicable text or non-text threshold. Do not apply the text threshold to every interface boundary, or the non-text threshold to ordinary text.
Check hover, focus, active, error, success, disabled, and selected states that users encounter.
For text over photography or gradients, inspect multiple locations. A single token pair cannot describe a background that changes beneath the text.
Record the color pair, its use, the text size where relevant, the state tested, and the measured ratio so later design changes can be checked again.

An analyzer table can inspect many page color pairs, but may include combinations that are not visible in the rendered page. An eyedropper can measure a particular pair, but usually one item at a time and may depend on mouse use and visual access. A grayscale review can reveal distinctions that disappear without hue, but it is qualitative and does not calculate a ratio. Use these approaches together where appropriate; none alone is a complete accessibility audit.

5. Review the page without color

View a grayscale version of the page and check links, errors, chart series, and status indicators. If meaning disappears, add a redundant cue such as text, an underline, a pattern, or an icon. Grayscale is a useful way to find color-only distinctions, but it does not replace numeric contrast checks.

Color vision deficiencies vary. Strong luminance contrast is broadly useful, and W3C cautions that predominantly long-wavelength red against dark colors can be difficult for some people with protanopia. Do not assume that a hue difference alone will make a distinction clear.

6. Retest after design changes

Repeat the checks after changing colors, typography, backgrounds, component states, themes, or chart styling. A passing design-token pair does not guarantee a passing rendered result when transparency, an image, a gradient, or another layer affects the final pixels.

Keep a small record for important combinations: where they appear, the requirement applied, the ratio, and the states reviewed. That makes it easier to catch regressions when a shared token changes.

7. State the conformance scope accurately

If you report results, name the WCAG version and conformance level you evaluated, and say which pages and states were included. Passing color checks does not establish full WCAG conformance or legal compliance.

WCAG 2.2 includes Success Criterion 1.4.11, Non-text Contrast. Legal standards vary by jurisdiction and policy. For example, Section508.gov says the Section 508 Standards require WCAG 2.0 AA and notes that 1.4.11 is not incorporated as a Section 508 Standards requirement. Determine the applicable framework for the work rather than treating every WCAG criterion as a statutory requirement everywhere.

Common problems and fixes

Problem	Why it happens	Fix
Text ratio is just below the target	The selected pair falls short; rounding does not turn a failure into a pass.	Adjust foreground or background luminance and measure again. Leave margin above the threshold if practical.
A link is distinguishable only by hue	Surrounding text and the link lose their distinction when color is unavailable.	Underline the link or add another persistent visual cue.
An error appears only as a red outline	Color alone signals the problem and may not explain what needs correction.	Add a written error message associated with the field; an icon can provide another cue.
Text passes on a solid color but fails on an image	The effective background varies across the text.	Check the rendered image area, then use a more stable backing surface or adjust the image/overlay and remeasure.
A focus ring or component boundary is hard to see	Non-text interface information has its own criterion and must contrast with adjacent colors where applicable.	Measure the relevant indicator against the adjacent color and strengthen it as needed.
A color checker says the site passes	The tool assessed selected pairs, not every accessibility requirement or every page state.	Use it as one part of review; separately assess color-only cues, keyboard access, semantics, and other relevant criteria.
Light theme passes but dark theme fails	The foreground/background relationship changed with the theme.	Measure each theme and its interaction states independently.

Performance, reliability, and cost

Color checking is usually a manual or design-review step, so the main cost is the time required to inventory combinations and states. A documented set of recurring component pairs reduces repeated work, but still verify the rendered page when imagery, transparency, or state changes affect the result.

Free methods such as an analyzer, eyedropper, or grayscale view can identify color-related issues. Their limits are different: bulk reports can include invisible combinations, eyedroppers are narrow, and grayscale is imprecise. Plan a repeatable review for releases and shared design-system changes. These checks do not replace broader accessibility evaluation.

Or skip the browser setup

If you need screenshots of pages to review, ScreenshotNeo is a website screenshot API and MCP server. It can capture PNG, JPEG, WebP, or PDF, but a screenshot is a review aid, not a contrast audit: use a contrast analyzer for ratios and inspect the page states that matter.

One GET request returns a capture. See the ScreenshotNeo API documentation for request options.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

Cookie banners, newsletter popups, and chat widgets are removed before the shot; each cleanup step can be turned off.
Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed. Response headers say which page verdict applied and whether it was billed.
An MCP server gives AI agents tools to take screenshots, get page information, and capture PDFs.
The free plan includes 1,000 screenshots a month with no card. Paid plans start at $5 for 3,000 shots; every feature is on every plan.

FAQ

Does a high-contrast color palette make a site accessible?

It can help with contrast, but it does not address color-only meaning or other accessibility requirements. Check both contrast and redundant cues.

Can I use color to show an error?

Yes, as one cue. Pair it with text or another visual indicator so the error remains identifiable without color.

Does a passing contrast checker prove legal compliance?

No. It checks color combinations within its scope. Applicable legal requirements and full conformance depend on the governing standard and broader evaluation.

Is 4.5:1 the requirement for every visible element?

No. It applies to ordinary text at WCAG 2.2 AA. Large text uses 3:1, while specified non-text information uses its separate 3:1 criterion.