What contrast ratio is enough?

For body-size text, 4.5:1 or more is the guide (WCAG 2.1 AA). For large text of 24px or more, or bold 18.66px or more, 3:1 is enough. The stricter AAA is 7:1 for normal text and 4.5:1 for large text. Non-text elements such as button borders, input field boundaries, and chart fills also need 3:1 or more.

My brand color doesn’t meet the standard. Do I have to change it?

In many cases, moving only the lightness while keeping the hue and saturation is enough. This tool searches in both lighter and darker directions and suggests the closest color meeting 4.5:1, so you can fix it while keeping the visual impression. If it still falls short, a practical split is to use the brand color for headings and areas, and a near-black color for body text.

How do I find a complementary color?

It’s the color directly opposite on the color wheel, i.e. the hue rotated 180°. For example, the complement of a blue at hue 240° is a yellow at 60°. Complementary pairs are the most eye-catching combination, but placed side by side in equal areas they clash, so it’s easier to limit one to an accent or use split-complementary colors (150° and 210°) on either side of the complement.

What’s the problem with colors looking different by color vision type?

About 5% of Japanese men have type 1 or type 2 color vision, where red and green look similar. If a chart is colored red and green, it looks like bands of the same color to them. This tool shows colors side by side in 4 ways of seeing and lists combinations with a CIEDE2000 difference below 10, so you can see right away which pairs are risky.

What should I do if colors can’t be told apart?

Adding cues other than color is the reliable fix. For line charts, separate with solid, dashed, and dotted lines; for bar charts, add patterns; and place labels directly on the chart instead of relying on a legend. If you want to improve while keeping the colors, separate the lightness rather than the hue. With a lightness difference, colors can be told apart in black-and-white copies and across color vision types.

When should I use HEX, RGB, or HSL?

HEX (#4F46E5) suits handing off to and from design tools, RGB suits calculations for screen display, and HSL suits adjusting colors. Because HSL separates hue, saturation, and lightness, operations like “make it a bit darker while keeping the same color” or “shift only the hue” take just one number. This tool’s color schemes and tones are also calculated in HSL.

Color Palette Checker (Contrast Ratio, Complementary Colors, Color Vision Simulation)

Enter a text color and a background color to check the WCAG 2.1 contrast ratio and AA/AAA pass or fail, with a suggestion for the closest color that meets the standard. On the same screen you can also get color schemes from the color wheel such as complementary, analogous, and triad, convert HEX / RGB / HSL, and compare how colors look with protan, deutan, and tritan color vision and in grayscale.

ABOUT

About Color Palette Checker (Contrast Ratio, Complementary Colors, Color Vision Simulation)

The color palette checker does all the checks you need after choosing a color on one screen. It judges the contrast ratio of the text and background colors against WCAG 2.1, and if it falls short, shows “the closest passing color”, changing only the lightness while keeping the hue and saturation. On the same screen you can also check color schemes taken from the color wheel such as complementary, analogous, and triad, convert HEX / RGB / HSL, and compare how colors look with protan (type 1), deutan (type 2), and tritan (type 3) color vision and in grayscale.

How to use Color Palette Checker (Contrast Ratio, Complementary Colors, Color Vision Simulation)

1Enter the text color (base color) in the top field. Besides the color picker, it reads any notation: #4F46E5, rgb(79,70,229), or hsl(243,75%,59%)
2Enter the background color and see the ratio and AA/AAA pass or fail in the “Contrast” tab (if it fails, a close passing color is suggested)
3In the “Color schemes” tab, check combinations such as complementary, analogous, and triad and their color codes (click a swatch to copy it)
4In the “Color vision simulation” tab, enter all the colors used in a chart or document and check for combinations that are easy to confuse
5Copy the share URL to pass the same color results straight to someone else

Great for

Check in numbers before publishing whether text colors on a site or slides are hard to read against the background
When a brand color is too light for body text as is, adjust only its darkness without changing the impression
Get the complementary or split-complementary colors of a base color to choose an accent for a logo or banner
Check that chart series colors don’t look the same for different color vision types
Check that color coding in documents printed or copied in black and white can be told apart by lightness alone
Convert a HEX from a design to RGB or HSL to paste into CSS or slides

Good to know

The contrast ratio is calculated from WCAG 2.1 relative luminance. White on black is the maximum, 21.00:1.
The pass criteria are AA 4.5:1 and AAA 7:1 for normal text, AA 3:1 and AAA 4.5:1 for large text (24px or more, or bold 18.66px ≈ 19px or more), and 3:1 for non-text elements such as button borders and chart color coding.
Ratios are shown truncated, and judged with the same value. 4.49:1 will never be shown as “4.5” and look like a pass.
The suggested color fixes the hue and saturation, moves only the lightness, and searches in both lighter and darker directions for the closest color meeting 4.5:1.
Color schemes are made by rotating the hue on the screen (additive RGB) color wheel, i.e. the HSL hue, so the complement of red is cyan. On the subtractive color wheel used for mixing paints, the complement of red is said to be green. Complementary is 180°, analogous ±30°, split-complementary 150° and 210°, triad 120° and 240°, and tetrad 90°, 180°, and 270°.
CMYK is a reference value from a simple conversion without a color profile. It can’t be used as values for submitting to a print shop.
The color vision simulation applies the transformation matrices of Machado et al. (2009) at severity 1.0. Actual perception varies by person, so do the final check with people who have that color vision or with dedicated software.
Distinguishability is judged with the CIEDE2000 color difference, and combinations below 10 are listed as “easy to confuse”.
All checks are calculated in your browser, and the colors you enter are never sent to a server.

Questions this tool answers

Use Color Palette Checker (Contrast Ratio, Complementary Colors, Color Vision Simulation) for searches like these:

Is this text and background color combination hard to read?
What color should I use when the contrast ratio is too low?
What is the complementary (opposite) color of this color?
I want to check that chart colors don’t look the same for different color vision types
I want to convert HEX to RGB or HSL
I want a color scheme that can be told apart even when printed in black and white

FAQ

What contrast ratio is enough?: For body-size text, 4.5:1 or more is the guide (WCAG 2.1 AA). For large text of 24px or more, or bold 18.66px or more, 3:1 is enough. The stricter AAA is 7:1 for normal text and 4.5:1 for large text. Non-text elements such as button borders, input field boundaries, and chart fills also need 3:1 or more.
My brand color doesn’t meet the standard. Do I have to change it?: In many cases, moving only the lightness while keeping the hue and saturation is enough. This tool searches in both lighter and darker directions and suggests the closest color meeting 4.5:1, so you can fix it while keeping the visual impression. If it still falls short, a practical split is to use the brand color for headings and areas, and a near-black color for body text.
How do I find a complementary color?: It’s the color directly opposite on the color wheel, i.e. the hue rotated 180°. For example, the complement of a blue at hue 240° is a yellow at 60°. Complementary pairs are the most eye-catching combination, but placed side by side in equal areas they clash, so it’s easier to limit one to an accent or use split-complementary colors (150° and 210°) on either side of the complement.
What’s the problem with colors looking different by color vision type?: About 5% of Japanese men have type 1 or type 2 color vision, where red and green look similar. If a chart is colored red and green, it looks like bands of the same color to them. This tool shows colors side by side in 4 ways of seeing and lists combinations with a CIEDE2000 difference below 10, so you can see right away which pairs are risky.
What should I do if colors can’t be told apart?: Adding cues other than color is the reliable fix. For line charts, separate with solid, dashed, and dotted lines; for bar charts, add patterns; and place labels directly on the chart instead of relying on a legend. If you want to improve while keeping the colors, separate the lightness rather than the hue. With a lightness difference, colors can be told apart in black-and-white copies and across color vision types.
When should I use HEX, RGB, or HSL?: HEX (#4F46E5) suits handing off to and from design tools, RGB suits calculations for screen display, and HSL suits adjusting colors. Because HSL separates hue, saturation, and lightness, operations like “make it a bit darker while keeping the same color” or “shift only the hue” take just one number. This tool’s color schemes and tones are also calculated in HSL.

Special Thanks

SOLO GUILD | サービス作るAIエンジニア

Back to all tools