Color Contrast Checker

Compare two opaque sRGB colors and show the WCAG 2 contrast ratio beside a text preview.

Compare two opaque sRGB colors and show the WCAG 2 contrast ratio beside a text preview.

Options

Opaque sRGB HEX only. Compute the unrounded WCAG 2 luminance ratio for AA/AAA ordinary and large text thresholds. Displaying a rounded ratio must not change pass/fail. This does not audit an entire page, imagery, font rendering or WCAG 3/APCA.

How to use

Color Contrast Checker

Compare two opaque sRGB colors and show the WCAG 2 contrast ratio beside a text preview.

Step by step

  1. Choose a supported input or load the example, then review the original.
  2. Compare two opaque sRGB colors and show the WCAG 2 contrast ratio beside a text preview. Start with the displayed settings, change only the options needed for your output and compare the result with your source.
  3. Run the task, review the actual result and copy or download a checked copy.

Choosing the settings

OptionWhat changes
OptionsCompare two opaque sRGB colors and show the WCAG 2 contrast ratio beside a text preview. Start with the displayed settings, change only the options needed for your output and compare the result with your source.
LimitsOpaque sRGB HEX only. Compute the unrounded WCAG 2 luminance ratio for AA/AAA ordinary and large text thresholds. Displaying a rounded ratio must not change pass/fail. This does not audit an entire page, imagery, font rendering or WCAG 3/APCA.

Example and expected result

#000000 on #ffffff has a 21:1 ratio; reversing them gives the same ratio. Ordinary-text AA requires at least 4.5:1.

If it is not working

  • Use two opaque HEX colors. Alpha requires a known compositing background and is not accepted here.

Formats and limits

Opaque sRGB HEX only. Compute the unrounded WCAG 2 luminance ratio for AA/AAA ordinary and large text thresholds. Displaying a rounded ratio must not change pass/fail. This does not audit an entire page, imagery, font rendering or WCAG 3/APCA.

FAQ

What does this tool do?

Compare two opaque sRGB colors and show the WCAG 2 contrast ratio beside a text preview.

Which setting should I choose?

Compare two opaque sRGB colors and show the WCAG 2 contrast ratio beside a text preview. Start with the displayed settings, change only the options needed for your output and compare the result with your source.

What are the limits?

Opaque sRGB HEX only. Compute the unrounded WCAG 2 luminance ratio for AA/AAA ordinary and large text thresholds. Displaying a rounded ratio must not change pass/fail. This does not audit an entire page, imagery, font rendering or WCAG 3/APCA.

Why did processing fail?

Use two opaque HEX colors. Alpha requires a known compositing background and is not accepted here.

Is my input uploaded or saved?

No. Processing runs on your device. Inputs and results stay in this page’s memory until you clear it or leave. They are not uploaded, logged or stored by ToolRobin. Copying places the result on your device’s clipboard.