Contrast Test

Running a contrast test on your color choices gives you an instant, objective answer to one of the most important questions in accessible design: can your users actually read what you've written? Whether you're fine-tuning body copy on a marketing page or locking in button label colors for a complex user interface, the contrast checker above calculates the precise contrast ratio between your foreground color and your background color, then maps that number against WCAG thresholds so you know — without guessing — whether your design will pass an accessibility audit.

What Is a Contrast Test and How the Contrast Checker Calculates Your Result

Color contrast is measured using a formula rooted in relative luminance — the perceived brightness of each color as a human eye processes it. The contrast ratio ranges from 1:1 (no contrast at all, such as white text on a white background) up to 21:1 (maximum contrast, such as black text on a white background). That ratio ranging from 1 to 21 is the universal currency of colour contrast evaluation across every major accessibility standard.

How the Contrast Ratio Formula Works

The tool derives each color's relative luminance from its RGB channel values, converting them from the hex color (or rgb hexadecimal) you provide. The relative luminance \(L\) for a given color is:

where each linearized channel value \(C_{lin}\) is calculated from its 8-bit sRGB value \(C_{sRGB}\) (normalized to 0–1) as:

Once you have the relative luminance of the lighter color \(L_1\) and the darker color \(L_2\), the final contrast formula is:

This is the color formula defined by the Web Content Accessibility Guidelines (WCAG) and it is the same calculation baked into every reputable colour checker and contrast analyser on the web. You supply a valid hex colour (alpha value optional) or use the built-in color picker to select your foreground colour and background colour, and the checker does the rest instantly.

The Web Content Accessibility Guidelines — specifically WCAG 2.0 and the updated WCAG 2.1 — set internationally recognized web standards for digital readability. They define two conformance levels relevant to contrast testing: AA (minimum contrast) and AAA (enhanced contrast). Meeting these accessibility guidelines is a legal and ethical baseline for web accessibility in most jurisdictions.

How to Find Colours That Pass: Tips, the Colour Contrast Analyser, and Building Accessible Palettes

Knowing your ratio fails is only half the work — the real goal is finding colours that pass without sacrificing your visual design intent. Here are the most reliable strategies for finding colors that satisfy wcag standards while preserving brand identity and color harmony.

Using the Colour Contrast Analyser (CCA) for Background Color and Screen Sampling

The Colour Contrast Analyser (CCA) is a free desktop application available for Windows and macOS. It lets you sample any background color or foreground background pair directly from your screen using a system-level eyedropper — making it ideal for auditing colors inside native apps, PDFs, or presentations that a browser-based contrast checker cannot access. The CCA displays aa and aaa results instantly and also includes a color blindness simulation mode so you can evaluate text readable legibility for users with deuteranopia, protanopia, and other conditions. It complements online tools perfectly as a desktop-first contrast analyser for comprehensive accessibility testing.

Coolors Adobe Extension for Large Text and Palette-Level Checking

The Coolors Adobe Extension integrates directly into Adobe Creative Cloud apps, letting you evaluate colour combinations and color combinations real time as you design. Instead of exporting hex codes and testing them one by one, you get instant contrast level feedback within your design workspace. The extension connects to Coolors' full suite of tools — including generate palettes, explore palettes, palette visualizer, extract palette, extract color gradient, and the interactive color wheel — giving you access to over 10 million color schemes as a starting point for accessible visual design. You can maintain unlimited palettes and save up to 10 palettes of 5 colors each in the base tier, with expanded options on paid plans.

When building a custom color palette from scratch, following a structured workflow leads to better results:

1. Choose a base color that aligns with your brand — this anchors your color scheme.
2. Select a color harmony type — complementary, analogous colors, triadic colors, split-complementary, or monochromatic — to generate a structured color scheme via the color wheel.
3. Preview your palette using a palette preview tool and simulate how the colour values appear under different color blindness simulation modes.
4. Run a contrast test on every foreground/background pairing in your color palette — not just the primary text. Check ui color pairings for buttons, links, and form input borders against the 3.0:1 minimum.
5. Adjust using the lightness slider — dragging toward darker values on the foreground colour or lighter values on the background colour is the fastest way to lift a failing ratio without changing hue or saturation.
6. Adjust color stops along the gradient or wheel to fine-tune a color gradient while maintaining perceived lightness separation between layers.

Once you've identified a passing combination, use copy to clipboard to capture the exact hex colour or RGB value. You can also save a permalink to any checked pair so your team can reference it during wcag compliance reviews — no re-entering values needed.

For link contrast specifically, standard body contrast checks are not sufficient. Use a dedicated link contrast checker to evaluate links that are distinguished from surrounding text using color alone — WCAG requires a 3:1 contrast ratio between the link text color and the surrounding body text contrast, in addition to the standard foreground color vs background colour check.

Below is a quick reference of worked examples showing example copy at representative colour combinations, demonstrating how the pass fail result changes dramatically based on your choices. Each example follows the contrast ratio calculation described above.

• Black text on white (#000000 on #FFFFFF): Relative luminance of white = 1.0, black = 0.0. $$\text{Ratio} = \frac{1.0 + 0.05}{0.0 + 0.05} = \frac{1.05}{0.05} = 21:1$$ Result: aa normal pass, aaa normal pass, aa large pass, aaa large pass. This is the theoretical maximum — perfect text readability and readable design for every user including those with significant visual impairments.
• Light gray text on white (#AAAAAA on #FFFFFF): The background rgb is (255, 255, 255) and the foreground is (170, 170, 170). This yields a ratio of approximately 2.32:1 — well below the 4.5:1 threshold for normal text AA and even below the 3:1 threshold for large text AA. Result: fails all four categories. A common mistake in web design, especially for placeholder text, captions, and fine print. Increasing the lightness separation — darkening the foreground background pair — is the fix. This combination also worsens significantly for users with color blindness.
• Dark blue on light blue (#1A237E on #E3F2FD) — UI component / large text borderline: This pairing produces a ratio close to 3.0:1, which means it sits right at the boundary for aa large and the graphical objects / user interface components threshold. It would pass for large text (18pt/24px or 14pt bold) and for interface elements like button borders, but it fails aa normal for standard body copy. This is a realistic ui color scenario for button labels in a branded blue palette. To remediate accessibility, darken the foreground or lighten the background until the ratio reaches 4.5:1 for body text use.