ColorCube

Brand Palette Color Accessibility Checker from Oomph

Step 1:

Paste your brand color palette colors (each on its own line). Hex colors are easiest, but rgb() values are also acceptable. Use our default list to see what happens, or delete it and paste your own.


Step 2: Review your colors below!

Above is your color palette list and how each of the colors perform with white or black as a ratio. For normal text (under 18px), the ratio must be over 4.5 to pass WCAG 2.0 AA standards. For large text, it must pass 3.0. This tool shows you the difference between the color ratio and the target ratio. Hover over the results to see the math.

Avoid failing color pairs, and be careful with EDGE values—the color passes validation, but is within 0.5 so therefore it may still present a legibility issue.

Most legible from available: From the given list, which color pairs are the most legible? This does not mean that the color pair will pass minimum requirements, but they have the best chance of passing.

Check your hover text color vs. your body text color:

If links are not underlined, there must be 3:1 contrast between link text and body text and also an additional change (e.g., underlining) on mouse hover and keyboard focus. Use the tool to compare your link color against your body text color to see how they pair in the Most Legible column.