C

Color Contrast Checker

Check color contrast ratios for WCAG accessibility compliance.

Design v1.0.0 Free 324 uses

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

Large text preview (24px bold)

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

About This Tool

Verify that your text and background color combinations meet WCAG 2.1 accessibility standards. Check contrast ratios for both normal and large text at AA and AAA compliance levels. Essential for web designers and developers who want to ensure their content is readable by everyone.

How to Use

  1. 1 Enter or pick a text color and background color
  2. 2 View the contrast ratio and WCAG compliance levels
  3. 3 Adjust colors until you achieve the desired rating
  4. 4 Copy the color pair for your CSS
X Facebook LinkedIn Reddit WhatsApp Telegram Pinterest Email

More Tools in Design

I

Image Mosaic / Pixel Art

Design

Convert images to pixel art or mosaic style with adjustable block resolution.
C

CSS Flexbox Playground

Design

Interactively explore CSS Flexbox properties with a visual playground and generated code.
D

Duotone Image Generator

Design

Apply Spotify-style duotone color effects to photos with custom color pairs.
ESC