What Relationship Map shows
Palette Relationship Map explains how each color works with the other colors in the palette. It is mainly used to decide which colors are safe for text, backgrounds, buttons, panels, and labels.
Matrix view
Matrix view compares palette colors against each other. One color acts as the background and another acts as the text color. Each cell shows the contrast ratio and a readability label so you can quickly see which combinations are strong and which ones should be avoided.
Top pairs view
Top pairs view focuses on the best combinations instead of showing every possible pairing. Use it when you want fast recommendations for readable text on backgrounds, button text, or high-confidence UI combinations.
WCAG labels
AAA is the strongest readability level and is ideal for important text. AA is the standard target for normal body text. Large text can pass with a lower contrast because bigger letters are easier to read. Fail means the pair is not reliable for readable text.
Contrast ratios
A ratio of 7:1 or higher is usually AAA. A ratio of 4.5:1 or higher usually passes AA for normal text. A ratio of 3:1 can work for large text and some interface graphics. Lower ratios may still look stylish, but they should not be used for essential text.
How to apply the results
Choose your main background and text colors from the strongest pairs first. Then pick button, badge, and border colors around those decisions. Accessibility should be checked early, because changing text and background choices later can affect the entire design.