Welcome, digital commandos!
Suit up with Bug Raiser (UX) and Launch Beans (UI) as you blast your way through the jungle of inaccessible color combos.
ContrAst: The Color Wars is your NES-inspired color contrast checker, helping you defeat the Red Falcon of poor color contrast and win the battle for inclusive design.
ContrAst is a retro-themed, web-based color contrast checker tool inspired by the classic NES game Contra.
It helps designers and developers ensure their color choices meet WCAG 2.1 accessibility standards, making the web a more inclusive place for everyone.
-
Live Color Contrast Checking: Instantly see the contrast ratio and WCAG AA/AAA compliance as you pick colors.
-
Randomizer: Hit "Randomize Colors" for a surprise challenge—will you get a power-up or a pitfall?
-
Sample UI Previews: See your color choices applied to sample masthead, and blog card components.
-
Accessible & SEO-Friendly: Semantic HTML, ARIA labels, skip links, and progressive enhancement.
-
Mobile-First, Widget-Like UI: The checker tool is compact and always accessible, even on small screens.
-
NES/Contra Humor: Bug Raiser and Launch Beans represent UX and UI, guiding you through the battle for accessible design.
-
Next features:
- small and large text compliance feedback
- bg and text color alternatives - suggestions like
- combine 1 and 2 into a hamburguer off canva menu, or other
- fix an issue with (3) hex colors
- Pick your background and text colors using the color pickers in the ContrAst widget.
- Check your contrast ratio and see if you meet the WCAG 2.1 AA/AAA standards.
- Hit "Randomize Colors" for a surprise challenge—will you get a spread shot of accessible combos, or fall into a pit of poor contrast?
- Watch as Bill (UX) and Lance (UI) update the sample UI components below, showing you the real impact of your color choices.
- Aim for the highest accessibility score—only the strongest (and most accessible) color combos survive!
- HTML5 (semantic, accessible)
- CSS3 (mobile-first, modern, accessible)
- JavaScript (ES Modules)
- Web Components (custom elements, no Shadow DOM)
- Frameworks required: 0
/assets
/components
/color-checker
/masthead-component
/blog-card
/styles
/blog-card
/global
/color-checker
/masthead-component
/utility
index.html
main.js
main.css
README.md
- Semantic HTML structure
- ARIA labels and skip link
- Accessible color contrast and focus states
- Descriptive alt text for images
- Mobile-first responsive design
- SEO-friendly meta tags
Shield:
This work is licensed under a Creative Commons Attribution 4.0 International License.
- NES Contra (Konami, 1988) for the theme and humor
- WCAG 2.1 Guidelines
- Accessible Color Contrast
Ready? Let’s CONTRAST!
↑ ↑ ↓ ↓ ← → ← → B A