Colour theory

March 27, 2026

Coloura

Where colour meets clarity

Share

Mail to

Eugene, UX/UI Designer

The contrast between foreground and background is

Contrast

Current
12
Pass Large Text
AA Text
AAA Strict

Readable interfaces start here.

Check how your foreground and background behave together across text, large headlines, and UI components.

What you need to know about colours & accessibility.

We experience contrast differently depending on the colour pair. Because of how our eyes work, some combinations feel much clearer than others even when they seem visually similar at first glance.

For digital products, the WCAG 2.1 standard is commonly used to evaluate readability. AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text.

Checking contrast early helps more people read and use your content comfortably, including users with low vision or different forms of colour vision deficiency.

Colour contrast isn’t just a visual detail — it directly affects readability and usability.

Small differences in colour combinations can determine whether content feels clear or difficult to read. This simple tool lets you experiment with foreground and background colours in real time, helping you understand how contrast behaves. Based on WCAG standards, you can quickly see whether your colour choices meet accessibility guidelines. It’s not about picking “nice colours,” but about creating interfaces that more people can actually use.

From contrast to clarity

Use this tool to test different combinations, compare contrast levels, and see how small changes can completely shift the experience. Once you find a balance that works, apply it to your own design system, interface, or product flow. Good colour decisions do more than make things look polished — they make your service easier to read, easier to use, and easier to trust.