Super Boring Tools

Search tools

Find a tool by name or what it does.

Contrast Checker

Check the WCAG contrast ratio between two colors and see which AA and AAA levels pass.

Foreground
Background
Contrast ratio14.68:1
AA · Normal textPass
AA · Large textPass
AAA · Normal textPass
AAA · Large textPass
Non-text · UI & graphicsPass
Nudge lightness
ForegroundL 17%
BackgroundL 100%

Brighten or darken a color while keeping its hue, and walk a failing pair until the badges pass.

Readability preview

Normal text: the quick brown fox jumps over the lazy dog.

Large text: nearly all designs need this.

How to check color contrast for WCAG

  1. Enter foreground and background

    Pick each color or type its hex value. The ratio and all pass or fail badges update as you edit.

  2. Read every result

    The exact ratio is graded against AA and AAA for normal and large text, plus the 3:1 minimum for user interface components and graphics.

  3. Judge the live preview

    Sample sentences render in your exact colors at normal and large sizes. The swap button flips the pair to test the reverse combination.

  4. Copy the summary

    Click Copy result to put the ratio and every pass or fail outcome on your clipboard for a ticket or a design review note.

Why use this tool

Every WCAG contrast check at once

AA normal (4.5:1), AA large (3:1), AAA normal (7:1), AAA large (4.5:1), and the 3:1 non-text minimum for UI components are evaluated side by side on every change.

Nudge a failing pair to pass

Plus and minus controls brighten or darken either color while holding its hue, so the ratio and every badge update live as you walk a failing combination up to a passing one.

The exact ratio, not just a verdict

The contrast ratio is shown to two decimal places, so you can see how close a failing pair is to the threshold.

Standard WCAG luminance formula

Colors are converted to relative luminance with the WCAG linearization and channel weights, the same math accessibility auditors use.

Readability preview with real text

Sample copy renders at normal and large sizes in your two colors, which shows what the numbers actually feel like to read.

One-click swap

A swap button exchanges foreground and background, so testing both directions of a color pair takes seconds.

Runs on your device

The check is pure math in your browser; your brand colors are never transmitted anywhere.

About this tool

This contrast checker measures the luminance difference between a foreground and a background color and grades it against the WCAG 2 thresholds. Each color is linearized and weighted with the standard relative luminance formula, and the resulting ratio, displayed to two decimal places, is tested against five criteria at once: AA and AAA conformance for normal and large text, plus the 3:1 minimum for non-text user interface components and graphics. Every badge updates the instant either color changes, and a swap button flips the pair in one click.

The classic reasons to check are quiet failures: grey body text on white, white labels on a brand-colored button, placeholder copy that looks elegant and reads terribly. The live preview renders real sentences in your exact colors at both sizes, which often settles a design debate faster than the number alone. When a pair fails, nudge either color lighter or darker with the plus and minus controls until the badge flips, then copy the summary as evidence.

Everything runs in your browser; no color is uploaded or logged anywhere. If your design tokens live as RGB or HSL values, the color converter turns them into the hex codes used here, and the color palette generator can produce the lighter and darker variants you might step to when a combination falls short.

Frequently asked questions

What is a contrast ratio?
Contrast ratio measures the difference in luminance between two colors, expressed from 1:1 (no contrast) up to 21:1 (black on white). The WCAG accessibility guidelines use it to judge whether text is readable against its background.
What do AA and AAA mean?
AA and AAA are WCAG conformance levels. For normal text, AA requires a ratio of at least 4.5:1 and AAA requires 7:1. For large text (about 18.66px bold or 24px regular and up), AA requires 3:1 and AAA requires 4.5:1. AAA is the strictest.
How is the ratio calculated?
Each color is converted to its relative luminance using the WCAG formula, which linearizes the red, green, and blue channels and weights them for human perception. The ratio is then (lighter + 0.05) divided by (darker + 0.05).
What counts as large text?
WCAG defines large text as roughly 18.66px (14pt) bold or 24px (18pt) regular and larger. Large text has lower contrast requirements because bigger letterforms are easier to read, so a color pair may pass for large text while failing for normal text.
How do I fix a color pair that fails?
Use the plus and minus controls next to the result to adjust either color lighter or darker. They change the lightness while keeping the hue, and the ratio and all badges update immediately, so you can walk a failing pair until it passes. The swap button also lets you test the reverse combination in one click.
What is the non-text contrast check?
WCAG 1.4.11 requires a contrast ratio of at least 3:1 for user interface components such as input borders and buttons, and for meaningful graphics like icons and chart segments. The non-text row grades your two colors against that 3:1 minimum alongside the text checks.
Is my data uploaded anywhere?
No. All contrast calculations run locally in your browser. Your colors are never sent to a server, stored, or logged.

Related tools