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.
Start with a base color and generate an extended palette where every shade contrasts properly with white and black. Export tokens.
See how a full paragraph looks with your chosen text and background colors. Not just a ratio; the real appearance.
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.
Enter a palette of colors and see a grid showing whether each foreground/background pair passes AA or AAA contrast. Must for designers.
Generate a random 5‑color palette where every adjacent pair passes WCAG AA contrast. Safe for inclusive designs.
Paste a list of foreground/background color pairs and instantly see which pass AA/AAA. Perfect for checking entire style guides.
Enter foreground and background colors and see a matrix of how each pair works for normal, protanopia, deuteranopia, and tritanopia.
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 foreground and background colors to instantly see the contrast ratio and pass/fail for AA and AAA. Simple and fast.
Calculate the perceived brightness of an RGB color and determine if black or white text is more readable. Accessibility tool.
Given a background color, this tool suggests foreground colors that meet AA/AAA contrast ratios. Works for all vision types.
Enter a hex color and get its relative luminance per WCAG definition. Understand why this matters for contrast.