EverydayDevTools
CategoriesBlogFAQAboutAuthorContact
Color Tools
Popular
Recently added

Contrast Checker

Enter foreground and background HEX colors to see contrast ratio and AA/AAA pass/fail results, with a live text preview.

Features

  • WCAG contrast ratio
  • AA and AAA checks
  • Live preview text
  • Copy ratio

How to use Contrast Checker

  • 1
    Enter foreground and background HEX colors.
  • 2
    Review the ratio and pass/fail cards.

Examples

Black on white

Input
#111111 on #ffffff
Output
High contrast pass

About Contrast Checker

Color Contrast Checker calculates WCAG 2 contrast ratios locally so you can verify readable text colors for accessibility before shipping UI.

Frequently asked questions

WCAG treats 18pt+ (or 14pt bold) as large text, which has a lower AA threshold (3:1).

Yes. No colors are uploaded.

Relative luminance contrast ratio from WCAG 2.

Related tools

Color Tools
Popular
New

Color Picker

Pick a color visually and copy its HEX value instantly.

Open tool →
Color Tools
Popular
New

HEX to RGB Converter

Convert colors between HEX and RGB with a live preview swatch.

Open tool →
CSS Tools
Popular
New

CSS Gradient Generator

Create linear-gradient CSS from two colors and a direction.

Open tool →