Skip to content
AldeaCode Logo
es
Developer100% local · 0 bytes sent

WCAG Contrast Checker

Pick a text colour and a background colour, see the contrast ratio computed with the WCAG 2 luminance formula, and find out instantly whether it passes AA or AAA for normal and large text. The live preview shows your real text on the real background so the decision is based on what your reader sees, not just on the math.

Loading…

How it works

Each color is parsed into RGB, then converted to relative luminance using the WCAG 2 formula. The contrast ratio is (lighter + 0.05) divided by (darker + 0.05). AA needs 4.5 for normal text and 3 for large text. AAA needs 7 and 4.5.

How to use it

  1. Pick the foreground color

    Set the color of your text or icon. Use the picker, paste a hex code, or type RGB values directly.

  2. Pick the background color

    Set what sits behind the foreground. Buttons, cards and page backgrounds all need their own contrast check.

  3. Read the WCAG verdict

    The tool computes the contrast ratio per WCAG 2.1 and shows pass or fail for AA and AAA at normal and large text sizes.

  4. Adjust until you pass

    Nudge either color until the ratio crosses 4.5:1 for AA or 7:1 for AAA. Live updates make iteration fast.

Use cases

Validate brand colors against WCAG AA before shipping a redesign.

Check whether a button label is readable on its accent background.

Test a dark mode palette against text colors in seconds.

Confirm that a placeholder reaches AA when the rest of the form does.

Your data never leaves your browser

Every utility runs entirely on your device. Nothing is uploaded, nothing is stored on a server. You can disconnect from the internet and they keep working.

Related tools

Developer

Color Converter (Hex / RGB / HSL)

Convert between hex, rgb() and hsl() with live preview.

Format

HTML Tag Stripper

Remove HTML tags from any text and keep only the readable content.

Format

JSON Formatter and Validator

Pretty-print, minify or validate JSON in your browser.