Guides JP

Color Contrast Checker

Check contrast ratio with WCAG 2.1 and APCA. Includes color blindness simulation and alternative color suggestions.

Last updated: 2026/10/16 Design Feedback & bug reports
12.63:1
Lc 97.4

Large text (24px) - Heading Text

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

Small text (12px) - Caption text

WCAG 2.1 Results

Normal Text AA (4.5:1) PASS
Normal Text AAA (7:1) PASS
Large Text AA (3:1) PASS
Large Text AAA (4.5:1) PASS
UI Components (3:1) PASS

APCA (WCAG 3.0 Candidate)

97.4
Lc Value
Fluent readability Lc 90+ Body text Lc 75+ Headings Lc 60+ Large text Lc 45+ Non-text elements Lc 30+

Color Blindness Simulation

How to Use

1

Enter Colors

Input text and background colors using the color picker or HEX code.

2

Review Results

WCAG 2.1 AA/AAA levels and APCA values are displayed in real-time.

3

Check Color Vision Simulation

View how the colors appear under 6 different color vision types with contrast ratios.

About Color Contrast Checker

A tool to improve web accessibility by checking the contrast ratio between text and background colors using both WCAG 2.1 (AA/AAA) and APCA (WCAG 3.0 candidate) standards. All processing runs entirely in your browser, so your color data is never sent to any server.

Features

  • WCAG 2.1 & APCA Dual CheckSimultaneously check contrast ratio with both current and next-generation standards.
  • Color Vision SimulationSimulate how colors appear for 6 types of color vision deficiency.
  • Alternative Color SuggestionsAutomatically suggests alternative colors that meet WCAG AA criteria when contrast is insufficient.
  • Privacy ProtectedAll processing happens in your browser. Color data is never sent to servers.

Use Cases

  • Website and app accessibility verification
  • Design color palette contrast checking
  • Color vision diversity consideration
  • ADA/Section 508 compliance checking
  • Accessibility audit reports for clients

FAQ

Is the contrast checker free to use?
Yes, it is completely free. No registration required.
What is the difference between WCAG 2.1 and APCA?
WCAG 2.1 is the current W3C recommendation that evaluates contrast using simple luminance ratios. APCA is a newer algorithm being considered for WCAG 3.0 that accounts for text color, size, weight, and human perception characteristics for more accurate results.
What is the difference between AA and AAA levels?
AA is the minimum accessibility standard (4.5:1 for normal text) that most websites should aim for. AAA is a stricter standard (7:1) recommended for sites requiring high accessibility.
What is color blindness simulation?
It simulates how people with different types of color vision (Protanopia: difficulty seeing red, Deuteranopia: green, Tritanopia: blue) perceive colors. Contrast ratios for each type are also shown to verify sufficient contrast for all users.
Is my color data saved anywhere?
No, your color data is never sent to or stored on our servers. All calculations happen locally in your browser.

Related Tools

px to vw Converter Convert CSS px to vw. Bulk CSS conversion supported px to em/rem Converter Convert CSS px to em/rem. Bulk CSS conversion supported Aspect Ratio Calculator Calculate simplified aspect ratio from dimensions Line Height Calculator Calculate line-height ratio from font size and leading CSS Gradient Generator Visually create Linear, Radial & Conic CSS gradients

Popular Tools

Character Counter Count characters, words, and lines in real-time JSON Formatter Format and validate JSON with syntax highlighting QR Code Generator Create custom QR codes with logo, colors & styles Password Generator Generate secure random passwords with one click Base64 Encoder Encode and decode text or files to Base64 IP Address Checker Check your global IP address

Related Guides

Web Color Basics: HEX, RGB, HSL Conversion, Palettes, and Contrast A beginner-friendly guide to web color: what HEX, RGB, and HSL mean and how they convert, opacity (alpha), WCAG contrast ratios for accessible color, and how to build a color palette. Color Contrast Ratio and Accessibility: WCAG Levels, Relative Luminance, and Readable Palettes Learn color contrast and accessibility from the ground up: the WCAG thresholds (4.5:1, 3:1 for large text, 7:1 for AAA), how relative luminance works, why contrast matters, designing for color vision diversity, and how to build palettes everyone can read. Dark Mode Basics: Switch Colors with prefers-color-scheme and CSS Variables Learn the basics of dark mode support: why it matters, how to use the prefers-color-scheme media query, switching colors with CSS variables, avoiding pure black while ensuring contrast, adjusting images and shadows, and how to roll out an implementation.