Color Contrast Checker

All tools
Color Contrast Checker
Check the WCAG contrast ratio between a text and background color — see AA/AAA pass-fail grades for normal text, large text and UI components, with a live preview and accessible-color suggestions.
Text color
Tint
Background color
Tint
Contrast ratio
--:1
Normal text
Body text under 18px (or under 14px bold)
AA AAA
Large text
18px+ regular, or 14px+ bold
AA AAA
UI components
Icons, borders, form controls & graphics
AA AAA
Live preview

The quick brown fox

Large text reads comfortably when contrast is sufficient.

This is a sample paragraph of normal body text. Good color contrast keeps your content legible for everyone, including people with low vision or color blindness. a sample link.

Small print and captions are the hardest to read — they need the most contrast.
Sample button Sample button
Suggestion

Everything is computed live in your browser using the WCAG 2.x relative-luminance formula — no uploads, no sign-up, completely free.

Share this
Related Tools
Color Blindness Simulator

See your image or palette the way people with protanopia, deuteranopia, tritanopia or achromatopsia do — runs entirely in your browser, nothing is uploaded.
Color Code Converter

Convert colors between HEX, RGB, RGBA, HSL, HSLA and HSV — pick a color, tweak the alpha, and copy any format instantly.
Palette Exporter

Paste or import a set of colors and export them instantly to CSS variables, SCSS, Tailwind config, JSON or SVG swatches — the finishing step for any palette.
Popular searches
color contrast checker wcag contrast ratio accessibility contrast checker text contrast checker aa aaa contrast test check color contrast online

Add this free tool to your own website — copy and paste the code below.