Accessible Color Palette Generator
Generate a palette in the main tool and check the text/background pairs you intend to use. Export remains available whether individual pairs pass or fail.
This guide explains the workflow. Use the main tool linked below to generate colors and export files.
What this page covers
This page explains the workflow and links directly to the relevant section of the main Chromoforge tool.
- Generate a palette and see contrast scores against white, black and palette peers simultaneously.
- The palette usability score combines readable text coverage, the strongest contrast pair and hue spread. It does not certify accessibility.
- Color vision simulations show how the palette looks to users with deuteranopia, protanopia and tritanopia.
- Check the relevant text and UI color pairs before exporting; the export is not blocked by the checker.
Worked example
Test the actual text and background together. A color name or shade number does not guarantee readable text.
.button {
background: #E24B4A;
color: #111111; /* AA for normal text: 4.80:1 */
}
/* White on the same coral: 3.93:1, fails normal-text AA. */What contrast ratio is required for normal text?
WCAG AA requires 4.5:1 for text under 18pt (or 14pt bold). Use the manual contrast checker in the main tool to verify any text/background pair before shipping.
Do decorative elements need to pass contrast?
No. WCAG exempts purely decorative images and disabled interface components from contrast requirements. Active UI components, icons that convey information, and focus indicators do need to pass 3:1 against adjacent colors.
How do I test contrast quickly across many pairs?
The best combinations panel in the contrast section checks every palette color against white, black and palette peers automatically and shows the top six results sorted by ratio. No manual entry needed for palette colors.