Loading tool...

Enjoying NextUtils? Every coffee helps keep these tools free for everyone.

Buy me a coffee

How to Use

  1. 1

    Enter the foreground color

    Pick or type your text color using the foreground color input.

  2. 2

    Enter the background color

    Pick or type your background color using the background color input.

  3. 3

    Read the results

    The tool instantly shows the ratio and WCAG AA/AAA pass/fail for all text sizes and UI components.

  4. 4

    Apply a suggestion if failing

    If the pair fails, click a suggested accessible alternative to apply it.

Share this tool:

Want to learn more?

📖

WCAG Color Contrast: What It Is, Why It Matters & How to Check It

Read →

Related Tools

Color Palette

Generate and manage color palettes with color theory and accessibility checks.

Try Color Palette →

CSS Gradient Generator

Create beautiful CSS gradients with visual editor and export CSS.

Try CSS Gradient Generator →

Color Converter

Convert between color formats including RGB, HEX, HSL, CMYK, and more. Professional color converter with color names, brightness analysis, and contrast ratios for designers and developers.

Try Color Converter →

Frequently Asked Questions

What contrast ratio is needed for WCAG AA?
WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold). UI components also need 3:1.
What is the difference between WCAG AA and AAA?
AA is the legal standard in most countries. AAA is enhanced: 7:1 for normal text and 4.5:1 for large text.
How is the contrast ratio calculated?
Using the WCAG relative luminance formula: L = 0.2126R + 0.7152G + 0.0722B, then ratio = (L1 + 0.05) / (L2 + 0.05).