A color audit reviews the current state of color usage across a website. Whether you are preparing for a redesign, checking accessibility compliance, or onboarding to an existing project, this checklist covers the essential points.
Accessibility (5 Points)
1. Text contrast. All body text meets 4.5:1 (AA) against its background. 2. Large text contrast. Headings and large text meet 3:1 (AA). 3. UI component contrast. Borders, icons, and form controls meet 3:1 against adjacent colors. 4. Focus indicators. Visible and meet 3:1 contrast (WCAG 2.2 for Color: What Changed and What You Need to Know">WCAG 2.2). 5. Color independence. No information is conveyed by color alone.
Consistency (5 Points)
6. Documented palette. An official palette exists with hex values and usage rules. 7. Variable usage. Colors are referenced via CSS variables, not hardcoded. 8. Sprawl check. Actual colors in production match the documented palette (extract and compare). 9. Cross-page consistency. The same semantic color is used for the same purpose on every page. 10. State consistency. Hover, active, and disabled states follow a predictable pattern.
Technical Quality (5 Points)
11. Dark mode support. All colors have dark mode variants that maintain contrast. 12. Responsive check. Colors remain distinguishable on small screens and in bright light. 13. Print styles. Critical content remains readable in print media queries. 14. Performance. No excessive CSS custom property nesting or unused color declarations. 15. Documentation. Color system is documented for current and future team members.
Running the Audit with PaletteRx
For points 1 through 5, paste the site URL into PaletteRx and check the extraction against WCAG standards. For points 6 through 8, compare the extracted palette against the documented system. Points 9 through 15 require manual review of the live site, but PaletteRx provides the baseline data.