Uwarp
Loading checker…

Help Us Improve

—

(—)

Colour contrast analyser for background and foreground

Colour contrast analyser for background and foreground pairs. Live WCAG ratio, pass or fail grades, hex RGB and HSL controls, and text preview.

What is a colour contrast analyser?

A colour contrast analyser (also called a color contrast analyzer) measures the ratio between a foreground and background colour—colour for text on a card, button label, or hero block—and reports WCAG-style pass or fail grades for normal and large copy. Use it to contrast compare candidate hex pairs, judge white text on black background readability, or sanity-check blue UI accents before handoff. Adjust background and foreground with hex fields or RGB and HSL sliders, preview sample copy with optional Google Fonts, reverse or save pairs, and share URL parameters. For APCA scoring see /color-contrast; for palette generation try /color-wheel or /coolors-trending-palettes—not a Chrome colour picker extension or print PMS lookup.

Color contrast analyzer features

Controls for testing foreground and background pairs the way design and a11y reviews expect.

  • Live contrast ratio

    Read the ratio as you edit background and foreground hex values—useful when you contrast compare two directions of the same pair.

  • WCAG pass or fail grades

    AA Large, AAA Large, AA, and AAA rows cover normal text and large type buckets.

  • Hex, RGB, and HSL inputs

    Paste google hex color strings or nudge channels on RGB and HSL tabs when you need repeatable tokens.

  • Background and foreground preview

    The full tool surface updates with your pair so you see an example of contrast on real layout colours.

  • Readable copy and typeface preview

    Large and normal text areas plus optional Google Fonts help judge colourtext readability beyond the Aa swatch.

  • Reverse and save pairs

    Swap layers in one click and store up to six recent background and foreground combinations locally.

  • Shareable URLs

    Background and foreground query parameters reload the same pair for teammates.

How to use contrast in design checks

A practical flow for color contrast analyzer workflows before you ship UI.

  1. Set the background colour first

    Start with the surface hex—page section, card, or chrome in a blue color UI design mockup.

  2. Tune the foreground text colour

    Adjust the text or icon layer until the ratio and grades match your target WCAG level.

  3. Validate both text size rows

    Confirm AA Large and AA normal when headings and body copy share one pair.

  4. Save or share passing hex values

    Use Save colours for quick recall or copy the URL with background and foreground parameters.

Tips for stronger contrast workflows

Reduce surprises when you test colour for text across UI and brand assets.
  • 01

    Test extreme pairs early

    White text on black background readability is an easy baseline—flip with Reverse colours to compare both polarities.

  • 02

    Re-check blue accents

    Contrast for blue color combinations shifts quickly with lightness; re-run after small saturation tweaks.

  • 03

    Check during palette exploration

    Run the analyser while shortlisting swatches from /colorschemer-schemes, not only at final QA.

  • 04

    Use saved swatches for regression

    Store approved background and foreground tokens locally after theme refactors.

Who this colour contrast analyser helps

Teams that need fast foreground and background feedback before implementation.

  1. UI and product designers: Validate colour for text on components, dashboards, and marketing heroes.

  2. Front-end developers: Confirm CSS hex values meet readability targets before merge.

  3. Design system maintainers: Document pre-checked background and foreground tokens with recorded ratios.

  4. Brand and content designers: Preview long copy with Google Fonts when judging colourtext on campaign backgrounds.

Why use this hosted checker

Browser-native color contrast analyzer review on the tools directory.

  • Private by default

    Ratio math runs locally; colours are not uploaded for analysis.

  • Clear pass or fail signals

    Numeric ratios and grade badges reduce subjective debate in critiques.

  • Faster validation in one session

    Move from palette browsing to contrast compare on the same site.

  • Honest scope

    WCAG 2.x relative luminance—not APCA, not print ink or window tint simulation.

Technical details

How this colour contrast analyser computes and stores results.
Algorithm
WCAG 2.x relative luminance contrast: (Llighter + 0.05) / (Ldarker + 0.05).
Grade thresholds
AA Large above 3:1, AA normal above 4.5:1, AAA Large above 4.5:1, AAA normal above 7:1.
Inputs
Six-digit hex text fields plus RGB and HSL sliders for each of background and foreground.
Saved pairs
Up to six background and foreground combinations in localStorage on this device.
Typeface preview
Optional Google Fonts list (top 50 by popularity) for copy preview only.
Processing
Client-side only—no server round trip for contrast math.

Sources & References

Authoritative references on WCAG contrast standards, relative luminance, and the color models this analyser uses.
  • “The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for large-scale text and incidental text which require at least 3:1.”
    — W3C — WCAG 2.1 SC 1.4.3

    WCAG 2.1 — Contrast Minimum (Success Criterion 1.4.3): This analyser computes the relative-luminance contrast ratio per the WCAG 2.x formula: (L1 + 0.05) / (L2 + 0.05), and displays pass/fail for AA and AAA thresholds at normal and large text sizes. w3.org/TR/WCAG21/#contrast-minimum

  • “Relative luminance is the relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white, based on the sRGB color space and the CIE 1931 luminosity function.”
    — W3C — Relative luminance

    Relative luminance definition: Each input hex is converted to sRGB linear values, then weighted by the standard luminosity coefficients (0.2126 × R, 0.7152 × G, 0.0722 × B) to compute its relative luminance for the contrast ratio. w3.org/TR/WCAG21/#dfn-relative-luminance

  • “The HSL color model describes colors in terms of hue, saturation, and lightness, which is more intuitive for humans to reason about than raw RGB values.”
    — Wikipedia — HSL and HSV

    HSL color model for color picking: Users can toggle between hex, RGB, and HSL input modes for both foreground and background, making it easier to adjust lightness directly while preserving hue and saturation. en.wikipedia.org/wiki/HSL_and_HSV

Frequently Asked Questions

Quick answers about this tool—open a question to read more.