How to Check Color Contrast for Web Accessibility

Color contrast is the difference in perceived brightness between a foreground color, such as text, and its background. When that difference is too small, people with low vision, color blindness, or even just a glare on their screen cannot read your content. WCAG, the Web Content Accessibility Guidelines, defines exact numeric thresholds that tell you whether a combination passes or fails. This guide walks you from zero to a fully checked and corrected design, using only free tools.

Last updated: July 2026

What Is a Contrast Ratio and Why Does It Matter?

A contrast ratio is a number between 1:1 and 21:1. A ratio of 1:1 means both colors are identical, producing no visible difference at all. A ratio of 21:1 is pure black on pure white, the maximum possible contrast. The ratio is calculated from the relative luminance of each color, a formula defined in the WCAG specification that accounts for how human vision perceives brightness across the color spectrum.

WCAG 2.1 sets two levels of compliance:

• Level AA (minimum): Normal text must achieve at least 4.5:1. Large text (18pt or 14pt bold) must achieve at least 3:1. This is the legal standard in most countries.
• Level AAA (enhanced): Normal text must achieve at least 7:1. Large text must achieve at least 4.5:1. AAA is aspirational for most projects, but worth targeting for primary body copy.

UI components and graphical objects, such as icon outlines and chart axes, must meet 3:1 against adjacent colors at Level AA. Text that is purely decorative, part of a logo, or inactive is exempt.

Step 1: Identify the Color Pairs You Need to Check

Before opening any tool, list every foreground-background combination in your design. Common pairs people miss include:

• Body text on the page background
• Link text on the page background (in both default and visited states)
• Button label text on button background color
• Placeholder text inside form fields
• Icon strokes or fills against the surrounding surface
• Error and success message text on their colored notification backgrounds

A single brand color used in multiple contexts can pass in one place and fail in another. A dark blue button label on a white page background is almost certainly fine, but that same dark blue label on a navy button will fail. Check every context separately.

Step 2: Find the Exact Hex Values

You need the precise hex codes, not an approximation from looking at the screen. If you are working from a design file, copy the values directly from your design software. If you are auditing an existing website, you have a few reliable options:

1. Open browser DevTools, select the element, and read the color and background-color CSS values from the Computed Styles panel.
2. Use the Color Picker on EveryFreeTool to sample colors directly from any on-screen pixel and get the exact hex code.
3. If the background is an image rather than a solid color, sample the lightest and darkest pixels behind your text, then test against both extremes.

Write down every pair in a simple list: foreground hex, background hex, context. Having this list before you open a checker keeps the process fast and prevents you from missing combinations.

Step 3: Run Each Pair Through a Contrast Checker

Open the Contrast Checker on EveryFreeTool. Enter the foreground hex in the first field and the background hex in the second. The tool calculates the ratio instantly and shows you whether the combination passes AA, AAA, or neither, for both normal and large text sizes.

Work through your list pair by pair. For each one, record the ratio and the pass or fail result. Do not skip pairs just because they look fine to you. Low-contrast failures often go unnoticed by designers with normal color vision precisely because the colors look distinct on a calibrated monitor in a dark room.

Step 4: Fix Pairs That Fail

When a pair fails, you have two levers to pull: make the foreground darker or make the background lighter, or both. The goal is to increase the luminance difference between the two values.

Adjusting Hue, Saturation, and Lightness

The most reliable approach is to adjust lightness in HSL space rather than tweaking hex values directly. If your button background is a mid-range blue, shift it darker by reducing the L value in 5-point increments and re-check after each step. Stop as soon as you clear 4.5:1 for normal text or 3:1 for large text. This method preserves your brand hue while making the minimum change needed to pass.

When You Cannot Change the Background

Sometimes the background color is fixed, for example, a hero image or a branded gradient. In those cases, add a semi-transparent dark overlay beneath your text, or place text inside a solid panel. Both approaches give you a predictable, checkable background color rather than a variable one.

Using Pre-Vetted Color Pairs

If you are still in the early stages of choosing a palette, browse the Accessible Color Pairs tool. It surfaces foreground and background combinations that are already confirmed to pass WCAG AA, so you can build from a compliant foundation rather than retrofitting colors later.

Step 5: Check Your Brand Palette as a System

Individual pair checks are necessary but not sufficient. Once you have corrected every failing pair, step back and look at the palette as a whole using the Color Palette Generator. A consistent palette with clearly defined roles, primary text, secondary text, interactive elements, backgrounds, makes future contrast checking faster because the same approved combinations repeat throughout the product.

Document your approved pairs in a simple table: role, foreground hex, background hex, ratio, pass level. Share that table with every designer and developer on the project. It removes guesswork and prevents regressions when someone swaps a color during a redesign.

Step 6: Automate Checks in Development

Manual checks catch design-level problems, but they do not catch issues introduced during implementation. Developers sometimes apply slightly different hex values than the approved design, or CSS overrides create unexpected color combinations. Add automated accessibility linting to your workflow:

• Use a browser extension such as axe DevTools or Wave to scan rendered pages.
• Add axe-core or jest-axe to your test suite to catch regressions in CI.
• Run a Lighthouse accessibility audit in Chrome DevTools before every release.

Automated tools catch roughly 30 to 40 percent of WCAG issues. Color contrast is one category where automation is particularly reliable, because it is a math problem with a deterministic answer. Manual checks cover the rest.

Common Mistakes to Avoid

• Testing only the default state. Hover, focus, active, and disabled states all need separate checks.
• Assuming dark mode is automatically accessible. Dark mode palettes fail just as often as light mode ones. Check both.
• Ignoring placeholder text. Many designs use a light gray placeholder that fails at 4.5:1. Either darken it or rely on a visible label instead.
• Forgetting focus indicators. Keyboard focus outlines must also pass 3:1 against adjacent colors. The default browser outline often fails on colored backgrounds.
• Treating 4.5:1 as the goal. It is the minimum. Aim for 5 or 6:1 for body text to give yourself a margin against real-world conditions like screen glare, aging monitors, and low brightness settings.

Quick Reference: Pass Thresholds

• Normal text, AA: 4.5:1
• Large text (18pt regular or 14pt bold), AA: 3:1
• UI components and graphics, AA: 3:1
• Normal text, AAA: 7:1
• Large text, AAA: 4.5:1

If you remember nothing else, remember 4.5:1 for normal text and 3:1 for everything else at the AA level. That covers the legal standard for most projects in most jurisdictions.

Putting It All Together

Color contrast checking is a repeatable, learnable skill. List your pairs, grab exact hex codes, run them through the Contrast Checker, fix any failures by adjusting lightness, document your approved palette, and add automated checks to catch regressions. The whole process for a small project takes under an hour. The payoff is a design that works for a wider audience, holds up in varying lighting conditions, and passes legal accessibility requirements without a redesign later.