Skip to content
Kordu Tools
Colour Tools Runs in browser Popular Updated 30 Mar 2026

Color Contrast Checker

Check WCAG color contrast ratios between foreground and background colors. See AA and AAA pass/fail badges instantly.

Luminance: 0.0116

Luminance: 1.0000

Contrast ratio

17.06:1

AA Normal(4.5:1)
Pass
AA Large(3:1)
Pass
AAA Normal(7:1)
Pass
AAA Large(4.5:1)
Pass

Large text sample (24px bold)

Normal text sample (16px) — The quick brown fox jumps over the lazy dog.

Small text sample (12px) — This is how small body text would appear with these colour choices.
Loading rating…

How to use Color Contrast Checker

  1. Enter your foreground color

    Select your text color using the color picker or type a hex code in the foreground field.

  2. Enter your background color

    Select your background color using the color picker or type a hex code in the background field.

  3. Read the contrast ratio and badges

    The contrast ratio calculates instantly, along with pass/fail badges for AA Normal, AA Large, AAA Normal, and AAA Large.

  4. Review the live text preview

    See how your color combination looks on large (24px+), normal (16px), and small (12px) text in the preview panel.

  5. Adjust until all required levels pass

    Use the Swap button to invert colors, try a preset, or fine-tune hex values until your required WCAG level shows a pass badge.

Color Contrast Checker FAQ

What contrast ratio do I need for WCAG AA?
WCAG 2.1 AA requires a minimum contrast ratio of 4.5:1 for normal-sized text (under 18pt regular or 14pt bold) and 3:1 for large text (18pt/24px regular or 14pt/18.67px bold).

What is the difference between AA and AAA?
AA is the legally required minimum for most web accessibility standards including EN 301 549 (EU) and Section 508 (US). AAA requires 7:1 for normal text and 4.5:1 for large text — the highest achievable contrast level, recommended for enhanced accessibility but not always legally required.

How is relative luminance calculated?
Each sRGB channel (0–255) is converted to linear light, then combined using the formula L = 0.2126R + 0.7152G + 0.0722B per the WCAG spec. The contrast ratio is (L1 + 0.05) / (L2 + 0.05) where L1 is the lighter color.

Is my data sent to a server?
No. All contrast calculations happen entirely in your browser. No color data is uploaded, stored, or logged.

What does 'large text' mean in WCAG?
WCAG defines large text as 18pt (24px) or larger for regular weight, or 14pt (approximately 18.67px) or larger for bold weight. Large text has a lower contrast requirement (3:1 AA) because it is more legible at lower contrast.

Does a passing contrast ratio guarantee full WCAG compliance?
No. Contrast is just one of many WCAG success criteria. Full compliance also requires proper semantic HTML, keyboard navigability, alt text for images, focus management, and more.

What contrast ratio does black on white have?
Black (#000000) on white (#FFFFFF) has a contrast ratio of 21:1 — the maximum possible contrast. This passes AA and AAA at all text sizes.

Can I check background images or gradients?
This tool checks solid color pairs only. For text over background images or gradients, you should check the lowest-contrast point of the background against your text color — this typically means checking against the lightest part of the background image.

Does it work on mobile?
Yes. The contrast checker is fully responsive and works on any modern mobile browser. The color picker interface is provided by the device's native OS color selector.

Background

Color contrast is one of the most frequently failed WCAG success criteria. If your text and background colors do not have sufficient contrast, your content is inaccessible to the 300 million people worldwide with color vision deficiency and to users in bright sunlight or on low-quality screens.

Enter a foreground (text) color and a background color using the native color pickers or hex input fields. The contrast ratio calculates instantly, along with pass/fail badges for four WCAG 2.1 levels: AA Normal (4.5:1), AA Large (3:1), AAA Normal (7:1), and AAA Large (4.5:1). A live preview shows how large, normal, and small text renders with your chosen color pair.

Swap colors with one click, pick from common presets, or fine-tune hex values until all required levels pass. Relative luminance values are shown for each color for reference.

Competitors like webaim.org/resources/contrastchecker offer similar core checking — Kordu adds live text previews at multiple sizes and a cleaner single-page interface with no page reloads.

Who is this for? UI/UX designers choosing accessible color palettes, developers implementing WCAG compliance, QA engineers running accessibility audits, and anyone building public-facing digital products that must meet legal accessibility standards.

Related tools

Color Picker

Pick any color and instantly view HEX, RGB, HSL, HSV, CMYK, alpha, and decimal values. Copy any format with one click.

Image Color Picker

Pick colors from any image and get HEX, RGB, and HSL values. Extract a full color palette instantly.

Meta Tag Previewer

Preview how your page looks in Google, Facebook, Twitter, and LinkedIn before you publish. Generate ready-to-paste meta tags.

Learn more

design

WCAG Contrast Ratios Explained: AA vs AAA Compliance

Learn WCAG contrast ratios with real examples. AA needs 4.5:1 for text, AAA needs 7:1. Fix failing color combos with practical tools and techniques.