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.

  1. 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.
  2. WCAG pass or fail grades: AA Large, AAA Large, AA, and AAA rows cover normal text and large type buckets.
  3. Hex, RGB, and HSL inputs: Paste google hex color strings or nudge channels on RGB and HSL tabs when you need repeatable tokens.
  4. Background and foreground preview: The full tool surface updates with your pair so you see an example of contrast on real layout colours.
  5. Readable copy and typeface preview: Large and normal text areas plus optional Google Fonts help judge colourtext readability beyond the Aa swatch.
  6. Reverse and save pairs: Swap layers in one click and store up to six recent background and foreground combinations locally.
  7. 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.

  1. Test extreme pairs early: White text on black background readability is an easy baseline—flip with Reverse colours to compare both polarities.
  2. Re-check blue accents: Contrast for blue color combinations shifts quickly with lightness; re-run after small saturation tweaks.
  3. Check during palette exploration: Run the analyser while shortlisting swatches from /colorschemer-schemes, not only at final QA.
  4. 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.

  1. Private by default: Ratio math runs locally; colours are not uploaded for analysis.
  2. Clear pass or fail signals: Numeric ratios and grade badges reduce subjective debate in critiques.
  3. Faster validation in one session: Move from palette browsing to contrast compare on the same site.
  4. 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.

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

Frequently Asked Questions

Have questions? We have answers.

Related tools

More tools from Color Tools.

View all Color Tools