Color Contrast Checker

Check contrast ratio. WCAG compliance.

About this tool

This tool checks foreground/background contrast ratio in one click. Three features: 1) Select colors for instant contrast ratio, 2) WCAG 2.1 AA/AAA compliance for normal/large text, 3) Useful for accessibility and UI color selection.

Tool interface

Sample text Aa 123
Contrast Ratio —
WCAG AA (Normal text 4.5:1) —
WCAG AA (Large text 3:1) —
WCAG AAA (Normal text 7:1) —

Usage

  1. Select foreground and background colors with picker
  2. Contrast ratio is displayed instantly
  3. Check WCAG 2.1 AA/AAA compliance

When to use

Accessibility compliance, UI color selection, text readability, WCAG verification.

Examples

White on black = 21:1, #666 on #fff = 5.74:1.

FAQ

What is WCAG?

Web Content Accessibility Guidelines. Int'l standard for web accessibility by W3C. Referenced in legal requirements.

Good contrast ratio?

WCAG 2.1: normal text 4.5:1 (AA), 7:1 (AAA). Large text 3:1 (AA), 4.5:1 (AAA).

AA vs AAA?

AA = minimum accessibility. AAA = stricter (e.g. 7:1 contrast). Most sites aim for AA.

How is contrast ratio calculated?

(L1+0.05)/(L2+0.05). L1=brighter relative luminance, L2=darker. Max 21:1 (white/black), min 1:1 (same color).

Is Color Contrast Checker free?

Free to use, no sign-up required.

Is data sent to a server?

Data stays on your device; we do not store it on our servers.

Supported browsers?

Tested on recent Chrome, Edge, Firefox, and Safari.

Offline use?

Core features work offline after the first load.

vs CLI or desktop apps?

Color Contrast Checker is an install-free online alternative to CLI or desktop apps.

When to use it?

Use it when: Accessibility compliance, UI color selection, text readability, WCAG verification.

Usage example?

Example: White on black = 21:1, #666 on #fff = 5.74:1.

Main features?

Contrast ratio checker, WCAG 2.1 AA/AAA compliance, Normal and large text

How is this different from similar tools?

Color Contrast Checker runs in the browser with no install—ideal for quick checks before heavier CLI or IDE workflows.

Search keywords

コントラスト, WCAG, アクセシビリティ, 視認性

Basic workflow

  1. Select foreground and background colors with picker
  2. Contrast ratio is displayed instantly
  3. Check WCAG 2.1 AA/AAA compliance

Practical use cases

  • Accessibility compliance, UI color selection, text readability, WCAG verification.
  • This tool checks foreground/background contrast ratio in one click. Three features: 1) Select colors for instant contrast ratio, 2) WCAG 2.1 AA/AAA compliance for normal/large text, 3) Useful for accessibility and UI color selection.
  • Contrast ratio checker
  • WCAG 2.1 AA/AAA compliance

Privacy & data handling

Data stays on your device; we do not store it on our servers.

Things to watch out for

  • Always double-check before pasting output into production
  • Try incognito if extensions break the page
  • Wait for processing on large inputs

Related learning content

Related tools

Tool set

Color & Design Set