Color Contrast Checker

Check if your color combinations meet WCAG accessibility standards

Live Preview

The quick brown fox jumps over the lazy dog.

Heading Example

Small text for detailed reading experience.

Text Link
FG: #000000 BG: #ffffff

摑 Foreground (Text)

100%

帹 Background

100%

Contrast Ratio

21:1

Excellent contrast

鉁?/div>
AA Normal Text
鈮?.5:1
鉁?/div>
AA Large Text
鈮?:1
鉁?/div>
AAA Normal Text
鈮?:1
鉁?/div>
AAA Large Text
鈮?.5:1

挕 Suggestions to Improve Contrast

    About WCAG Contrast

    搳 Contrast Ratio

    Measures the difference in brightness between two colors. Ranges from 1:1 to 21:1.

    鉁?WCAG AA

    Minimum accessibility level. Requires 4.5:1 for normal text, 3:1 for large text.

    専 WCAG AAA

    Enhanced accessibility. Requires 7:1 for normal text, 4.5:1 for large text.

    鈾?Why It Matters

    Good contrast ensures readability for users with visual impairments.