Design

◑

Color Contrast Checker

Check WCAG color contrast ratios for accessibility compliance

Foreground (Text)

Background

Contrast Ratio

14.63:1

Excellent

5 of 5 WCAG criteria passed

1:13:14.5:17:121:1

Live Preview

Heading Text (28px Bold)

Large text - 20px semi-bold. This meets the WCAG "large text" definition and only needs 3:1 contrast.

Normal body text at 16px. This is the most common text size and requires 4.5:1 contrast for WCAG AA compliance. Make sure your content is readable at this size.

Small text at 13px - captions, footnotes, and fine print. Harder to read, so good contrast matters even more here.

Outlined ButtonLink Style

WCAG 2.1 Compliance

AA Normal Text

Pass - requires 4.5:1

Body text under 18pt (or under 14pt bold)

AA Large Text

Pass - requires 3:1

Text 18pt+ or 14pt+ bold

AAA Normal Text

Pass - requires 7:1

Enhanced contrast for body text

AAA Large Text

Pass - requires 4.5:1

Enhanced contrast for large text

AA UI Components

Pass - requires 3:1

Icons, borders, form controls

Quick Reference

AA Normal Text: 4.5:1 minimum - standard for most content

AA Large Text: 3:1 minimum - text 18pt+ or 14pt+ bold

AAA Normal Text: 7:1 minimum - enhanced accessibility

AAA Large Text: 4.5:1 minimum - enhanced for large text

UI Components: 3:1 minimum - required for interactive elements, icons, and graphical objects

Share to Community

Was this tool helpful?

What is Color Contrast Checker?

Free online color contrast checker to test foreground and background color combinations against WCAG 2.1 accessibility standards.

Our free color contrast checker calculates the contrast ratio and shows whether your colors pass AA or AAA levels for normal text, large text, and UI components. Enter colors as hex, RGB, or HSL values and get instant results. Check if white text on a colored button is readable, find an accessible text color for a brand background, or verify a link color meets the 4.5:1 minimum. Useful for accessibility audits, design system reviews, and meeting ADA and Section 508 requirements. No signup required.

How to Use Color Contrast Checker

1Enter or pick a foreground (text) color using the color input
2Enter or pick a background color
3View the contrast ratio and WCAG AA/AAA pass/fail results instantly
4Adjust colors until you achieve the desired accessibility level

Frequently Asked Questions

A contrast ratio is a numerical value (from 1:1 to 21:1) that measures the difference in perceived brightness between two colors. Higher ratios mean better readability. WCAG uses this ratio to determine whether text and backgrounds are accessible.

WCAG AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text. WCAG AAA (the highest level) requires 7:1 for normal text and 4.5:1 for large text. AA is the standard most sites aim for; AAA is recommended for critical content.

Large text is defined as 18pt (24px) and above for regular weight, or 14pt (18.66px) and above for bold weight. Large text has lower contrast requirements because larger characters are easier to read.

The contrast ratio is calculated using the relative luminance of two colors according to the WCAG 2.1 formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker. Luminance values are derived from the sRGB color space.

Text on a button follows the same WCAG text rules: 4.5:1 for AA at normal size, or 3:1 for large text. UI components and graphical objects, such as a button border or icon, need at least 3:1 against adjacent colors under WCAG 2.1. Check both the label and the component edges.

Adjust the lighter color lighter or the darker color darker until the ratio reaches the target. Often nudging the text color rather than the brand background is enough. Enter the hex values and tweak them while watching the live ratio to find a combination that passes.

Share this tool

Related Tools

👁

Color Blindness Simulator

Free online color blindness simulator - see how colors appear to people with color vision deficiency

Font Pair Generator

Free online font pair generator - find beautiful Google Fonts pairings with live preview and ready-to-use code

🔍

Text Similarity Checker

Free online text similarity checker - compare two texts and calculate similarity percentage

🔗

Broken Link Checker

Free online broken link checker - find broken links on web pages

GRD

CSS Gradient Generator

Free online CSS gradient generator - create beautiful CSS gradients with a visual editor and live preview

Font Pairing Tool

Free online font pairing tool - discover beautiful Google Font combinations

WCAG 2.1 Compliance

AA Normal Text

Pass - requires 4.5:1

Body text under 18pt (or under 14pt bold)

AA Large Text

Pass - requires 3:1

Text 18pt+ or 14pt+ bold

AAA Normal Text

Pass - requires 7:1

Enhanced contrast for body text

AAA Large Text

Pass - requires 4.5:1

Enhanced contrast for large text

AA UI Components

Pass - requires 3:1

Icons, borders, form controls

Quick Reference

AA Normal Text: 4.5:1 minimum - standard for most content

AA Large Text: 3:1 minimum - text 18pt+ or 14pt+ bold

AAA Normal Text: 7:1 minimum - enhanced accessibility

AAA Large Text: 4.5:1 minimum - enhanced for large text

UI Components: 3:1 minimum - required for interactive elements, icons, and graphical objects

What is Color Contrast Checker?

Free online color contrast checker to test foreground and background color combinations against WCAG 2.1 accessibility standards.

Frequently Asked Questions