Color Contrast Checker

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

.contrast-preview {
  background-color: #131313;
  color: #ffffff;
}

CSSSASSSCSS

Edit

Colors

Background Color:

Font Color:

Preview Text

Contrast Ratio

18.58:1

AA Large ✓OK for big headings and icons

AA Text ✓OK for normal body text

AAA ✓Strictest standard, best for everyone

What is a Color Contrast Checker?

Web Content Accessibility Guidelines (WCAG) require enough contrast between text and its background so everyone, including people with low vision, can read it. Pick a background color, a font color, and preview sample text at title, body, and fine-print sizes to see the contrast ratio and whether it passes AA Large, AA Text, and AAA — then export the CSS.