100% FREE UNLIMITED ← All Color Tools

WCAG Color Contrast Checker

Check contrast ratio between text color and background color easily to meet WCAG 2.1 AA and AAA accessibility standards

Text / Foreground Color

Text Lightness 100%

Background Color

Background Lightness 53%

One-Click Accessibility Auto-Fix Automatically adjusts lightness to pass WCAG

Normal Text AA (4.5:1) PASS

Normal Text AAA (7.0:1) FAIL

Large Text AA (3.0:1) PASS

Large Text AAA (4.5:1) PASS

LIVE TYPOGRAPHY PREVIEW

Large Heading Text (24px Bold)

Normal body paragraph text (16px). Good color contrast ensures that everyone—including users with low vision or color deficiencies—can read your interface effortlessly in any lighting condition.

UI Component (3.0:1) #FFFFFF on #2563EB

Color Contrast Checker is an online tool created to help web designers and graphic designers test the readability and visibility between foreground text color and background color. This tool calculates the exact contrast ratio according to WCAG 2.1 AA and AAA accessibility standards, equipped with a live text preview and a one-click Auto-Fix button so you can easily find the best color combination for your website.

How to Use It

1. Pick Text Color. Choose the foreground text color using the color picker or input the HEX value in the Text Color box.

2. Pick Background Color. Choose the background color or input the HEX value in the Background Color box, or click Swap Colors to reverse them.

3. See Result & Auto-Fix. See the contrast ratio score and live preview on the right. If the contrast fails, click the Auto-Fix button to automatically adjust the color to pass AA or AAA standards.

Like:

4.9/5 (79)

Complete Color Tools Suite — 100% Free

All pro & supporter features unlocked for everyone: unlimited palettes, projects, collections, and accessibility tools.

🎨

Image Color Picker

Pick pixel colors from uploaded images, URLs, or screen & save palettes

🏷️

Browse Named Colors

Explore & search curated named colors organized by hue family

RGB Color Picker

Pick a color and get RGB code with a preview of the background and foreground colors, you can easily see the visualization of the RGB colors

Color Picker from Screen

Print Screen and Paste capture screen, click on color to get the Hex code, RGB code, color name

My Library — Saved Palettes, Projects & Collections

Save unlimited color palettes, gradients, colors, projects, and collections for free in your browser

Color Format Converter (HEX, RGB, HSL, CMYK)

Convert color codes between HEX, RGB, HSL, and CMYK quickly and easily with live color preview and color harmonies

Color Blindness Simulator

Simulate how your colors and color palettes look across 8 types of color blindness to create accessible designs

WCAG Color Contrast Checker

Check contrast ratio between text color and background color easily to meet WCAG 2.1 AA and AAA accessibility standards

CSS Gradient Maker

Create linear, radial, and conic CSS gradients easily, preview color transitions, and copy CSS code or download gradient image

Interactive Palette Generator

Press Spacebar to generate color schemes and get HEX, RGB, HSL codes with complementary, triadic, tetradic, and analogous colors

Color Palette Generator

Extract colors scheme using our color palette generator, get beautiful color schemes from random images or from your image in seconds

Color Code Picker

Pick a color and get rgba, hsva, hsla, cmyk, Lab, Hex. Combine background and text color

HEX Code Picker

Pick a color and get HEX code and complementary colors, triade, tetrade, analogic colors

CMYK Color Picker

Pick CMYK color and get the RGB, Hex and similar colors of Pantone Matching System (PMS)

Color Picker from Image

Upload or paste image URL to pick color code from image and get the Hex, RGB and CMYK code, Click to copy the color code of selected colors