Check color contrast against WCAG 2.2
Check foreground and background colors against WCAG 2.2 contrast requirements, preview your typography, and find adjustments that help failing combinations meet AA or AAA thresholds.
Need to compare more than two colors? Paste a collection or drop an ASE or GPL palette file to examine contrast across multiple combinations.
Use the free checker below, directly in your browser. Your colors and palette files are processed locally, without uploading anything.
Check a pair of colors
Enter two colors to see their contrast ratio and WCAG results. Adjust the text size and weight, or enter your own words to preview how the combination looks in practice.
Passing a numerical contrast threshold doesn't always guarantee comfortable reading, so the visual preview is an important part of evaluating your colors.
Sampled from the screen, mixed like paint, kept where you keep your files.
The pair as it will be read. Click the words to set your own.
Hex, rgb(), hsl(), or three numbers, or click the swatch to pick one. It stays in your browser.
This checker is free to use, with no account or download required. Suisai for Mac provides additional controls and integration with your palettes.
Every pair in a palette, at once
Checking two colors is useful. But when you're building a palette, you may want to know which colors can work as text against which backgrounds.
Paste up to ten colors, or drop an ASE or GPL palette file, and the matrix evaluates each foreground/background combination against the applicable WCAG thresholds.
A palette of eight colors produces 56 text-and-background combinations, because each pairing is checked in both directions. The contrast ratio is the same in either direction, but the preview lets you judge how each color works as text or background. Select any cell to examine that combination in the Pair checker.
A hex, rgb() or hsl() on each line, with a name after it if you like. Up to ten, as in the app.
Text down the side, ground across the top. Each cell is the pair itself, with its ratio and grade beneath: 7:1 and up, 4.5:1, 3:1, under 3:1. Click a cell to check that pair above.
What the contrast ratio tells you
The contrast ratio measures the difference in relative luminance between two colors. It doesn't change when you change the font size, weight, or typeface. What changes is the WCAG requirement that applies to the text you're using.
For WCAG 2.2, the principal contrast thresholds are:
| Use | AA | AAA |
|---|---|---|
| Normal text | 4.5:1 | 7:1 |
| Large text | 3:1 | 4.5:1 |
| Relevant interface components and graphical objects | 3:1 | No separate AAA threshold |
Large text generally means at least 24 CSS pixels at non-bold weights, or approximately 18.7 CSS pixels in bold text. The particular typeface and its weight can affect how those sizes are interpreted.
Suisai calculates the contrast ratio independently of typography, but the preview lets you see how the colors look with your chosen text size and weight. A combination can meet the numerical threshold and still be uncomfortable to read.
The checker also avoids rounding a failing result into a passing one. A calculated ratio of 4.496:1, for example, remains below the 4.5:1 AA threshold.
A passing contrast ratio is useful information, but what happens when your chosen colors don't meet the requirement? That's where Reach comes in.
Find a color that meets your contrast target
When a color combination falls short of your chosen WCAG threshold, Reach helps you find an adjustment that meets it.
Choose whether to adjust the text or background color. Reach explores lighter and darker variations while preserving the original hue and retaining as much of the color's chroma as possible within sRGB.
Where a suitable adjustment exists, you can compare the suggested color against the original and see how its contrast improves. If the target cannot be reached through a lightness adjustment, Reach tells you rather than suggesting a color that still fails.
The free checker includes Reach for individual color pairs. In Suisai's Nōtan contrast window, you can also keep suggested colors for further comparison, add them to existing palettes, or replace the original swatch directly.
Reach there also draws on the colors you already have. Where one from an open palette or the Color Bench would meet the target, it is offered alongside the adjustments, so you can reuse a color rather than introduce a near-duplicate.
Check contrast while you work with your palettes
Suisai's contrast checker, Nōtan (濃淡), brings Pair, Matrix, Ladder, and Reach into your regular palette workflow.
Send colors directly from an open palette or the Color Bench, or press C while hovering over or selecting a swatch. Use any font family installed on your Mac to preview how your intended typography looks alongside the calculated WCAG results.
When Reach suggests an adjustment, you can keep the new color in Nōtan for further comparison, add it to an existing or new palette, or replace the original swatch directly.
The Matrix compares up to ten colors gathered from different palettes, the Color Bench, or Reach suggestions. Send an entire palette to Nōtan with a single command, then select individual combinations for closer inspection.
Ladder takes a different approach. Hold one color constant and see how it performs against every other color in your collection, with a text preview and WCAG result for each combination. Use your chosen color as the text against different backgrounds, or reverse the comparison to see each color as text against a common background. Sort the results from dark to light to make the differences easier to examine.
More ways to evaluate and work with color
Checking contrast is one part of making informed color decisions. Explore how different viewers may perceive your colors, refine your palettes, or prepare them for use in design and code.
- Mix and compare colors →The Bench measures the same ratio in its gutter, beside the hue and lightness difference.
- Explore color-vision simulation →Preview how your colors may appear under different types of color vision deficiency.
- Build and edit palettes →Refine individual swatches and organize combinations for your projects.
- Take your colors into code →Copy individual color values or export complete palettes in formats suited to your work.
Your colors, checked where you work with them.
Evaluate WCAG contrast directly alongside your palettes, preview combinations using your own fonts, and find adjustments that preserve the character of your original colors.
Bring suggested colors straight into your palettes, or export your work for use in design applications and code.
One purchase. No subscription. No account or analytics.
If Suisai isn't right for you, a full refund is available within 30 days for direct purchases via Paddle. No reason needed.
macOS 14 or later · Universal · One-time purchase