Advanced Color Contrast Matrix – Test All Pairs in Palette
Paste a list of hex colors and see a grid showing the contrast ratio for every combination. Instantly identifies which pairs pass WCAG AA/AAA.
UD5 Toolkit
Paste a list of hex colors and see a grid showing the contrast ratio for every combination. Instantly identifies which pairs pass WCAG AA/AAA.
Enter a text color and background color and instantly see if the combination passes WCAG AA and AAA ratio. Safe colors.
Enter foreground and background colors and see a matrix of how each pair works for normal, protanopia, deuteranopia, and tritanopia.
Enter foreground and background colors to instantly see the contrast ratio and pass/fail for AA and AAA. Simple and fast.
Pick a base color and generate a 10‑step scale where each step meets a specific contrast ratio against white or black. Export as CSS custom properties.
Paste a list of foreground/background color pairs and instantly see which pass AA/AAA. Perfect for checking entire style guides.
Start with a base color and generate an extended palette where every shade contrasts properly with white and black. Export tokens.
Generate a random 5‑color palette where every adjacent pair passes WCAG AA contrast. Safe for inclusive designs.
See how a full paragraph looks with your chosen text and background colors. Not just a ratio; the real appearance.
Enter a palette of colors and see a grid showing whether each foreground/background pair passes AA or AAA contrast. Must for designers.
Calculate the perceived brightness of an RGB color and determine if black or white text is more readable. Accessibility tool.
Check the contrast ratio between foreground and background colors to ensure web accessibility compliance. Get WCAG 2.1 AA/AAA pass/fail results instantly.
Enter a hex color and get its relative luminance per WCAG definition. Understand why this matters for contrast.
Given a background color, this tool suggests foreground colors that meet AA/AAA contrast ratios. Works for all vision types.