Color Contrast Checker

Compare text and background colors with WCAG AA and AAA thresholds, then try an adjustment or save the pair.

Text

Background

px

Sample heading

Use this sample to compare the selected text and background colors. Check the thresholds for your actual text size and weight.

Small text: Check whether your colors are readable at different sizes.
Contrast ratio
21:1
AA normal text
4.5:1
AA large text
3:1
AAA normal text
7:1
AAA large text
4.5:1
Color Studio The full suite: picker, palettes, gradients, contrast Color Picker Pick colors and convert HEX, RGB, HSL, HSV, CMYK Color Palette Generator Build palettes and export PNG, JPG, CSS or JSON Gradient Generator Linear, radial, conic and mesh CSS gradients Image Color Picker Pick colors and extract palettes from supported images Image Converter Convert images to JPG, PNG, WebP, AVIF and other formats

Your statistics

0
Colors picked
0
Palettes exported
0
Gradients generated
0
Contrasts checked
Color picker
Favorite mode
0%
Usage score

How to check color contrast

Docs

Enter the text color and background color as HEX values, including the # sign, or use their color swatches. Check that both fields are valid. The preview and contrast ratio update when the colors change.

Check a text and background pair

AA and AAA thresholds

Compare normal text with 4.5:1 for AA and 7:1 for AAA. Large text uses 3:1 and 4.5:1 respectively.

Live ratio and preview

Change either color to update the ratio and sample text. The size control changes the preview while all four threshold results remain visible.

Try an adjustment

Adjust to AA and Adjust to AAA attempt to change the text color. It can fail for the chosen background, so read the resulting ratio.

Show 3 moreShow less

Approximate color filters

The Protanopia, Deuteranopia and Tritanopia controls apply simple visual filters. They cannot prove readability for people with a color vision deficiency.

Save a color pair

Name a preset to store the text and background colors in this browser. Open Presets to load it again.

Related color tools

Use the mode links to open the picker, palette builder, gradient generator or image extractor on its own page.

Frequently asked questions

How do I check color contrast?

Choose a text color and background color, or enter six-digit HEX values. Read the ratio and the four AA and AAA results. A pass applies to this color pair and text threshold, not to an entire website.

What contrast ratio does WCAG require?

For normal text, WCAG AA requires at least 4.5:1 and AAA requires 7:1. Large text requires 3:1 for AA and 4.5:1 for AAA. Exceptions exist for items such as logos and inactive controls.

Can it fix the contrast automatically?

Adjust to AA and Adjust to AAA attempt to lighten or darken the text color by changing its RGB channels. It may change the hue and may fail for the chosen background. Check the ratio after each adjustment.

Are the colorblind previews accurate simulations?

The controls use simple sepia, saturation and hue filters. Treat them as approximate previews. They are not validated models of color vision and cannot confirm that a design is accessible.

Show 4 moreShow less

What counts as large text?

WCAG defines large text as at least 18pt regular or 14pt bold, equivalent to about 24px regular or 18.67px bold in CSS. The preview size control does not decide which threshold applies to your actual design.

Is the contrast checker free?

Yes. MORELESS provides the checker without an account. Color calculations run in this browser.

Can I check my brand colors?

Yes. Enter the text and background HEX colors directly. You can also save the pair as a named preset in this browser. Test each real text and background combination separately.

How do I open the other color tools?

Use the mode links above the checker. They open dedicated pages for the picker, image extractor, palette builder and gradient generator.

Technical details

Relative luminance

The ratio uses the relative luminance of the two sRGB colors. It ranges from 1:1 for identical colors to 21:1 for black and white. This checks a solid color pair rather than a page screenshot.

Text contrast thresholds

All four results are calculated from the unrounded ratio. AA uses 4.5:1 for normal text and 3:1 for large text. AAA uses 7:1 and 4.5:1. Passing these checks alone does not establish WCAG conformance.

Show 2 moreShow less

Approximate preview filters

The three named color vision previews apply CSS sepia, saturation and hue rotation filters to the sample area. They do not alter the reported contrast ratio or implement a validated color vision model.

Adjustment and storage

The adjustment changes all three text RGB channels in steps until a target is reached or the attempt ends. It does not guarantee a pass or preserve hue. Named color pairs are stored locally in IndexedDB.