RevengeCSS
A CSS bookmarklet that highlights bad HTML with ugly pink comic sans error messages.
What is RevengeCSS?
REVENGE.CSS is a CSS bookmarklet that helps developers identify bad HTML and accessibility issues by displaying garish pink error messages in Comic Sans directly on problematic elements. It scans web pages for common markup problems like deprecated elements, malformed links, inaccessible forms, and missing ARIA landmarks. The tool provides immediate visual feedback during development to improve code quality and accessibility compliance.
Frontend developers, web designers, and accessibility specialists who want to quickly identify HTML markup issues during development and testing. It's particularly useful for teams working on accessibility compliance and semantic HTML structure.
Developers choose REVENGE.CSS because it provides immediate, in-your-face visual feedback about HTML problems without requiring complex setup or configuration. Its deliberately ugly presentation makes issues impossible to ignore, encouraging better coding practices through visual reinforcement rather than subtle warnings.
Overview
A CSS bookmarklet that puts pink error boxes (with messages in comic sans) everywhere you write bad HTML.
Use Cases
Best For
- Quickly identifying HTML validation issues during development
- Checking web pages for accessibility compliance problems
- Teaching proper semantic HTML structure to junior developers
- Visual debugging of markup errors in complex web applications
- Ensuring forms and interactive elements meet accessibility standards
- Detecting deprecated HTML elements and obsolete attributes
Not Ideal For
- Production websites where visual error displays would disrupt user experience
- Teams already using integrated accessibility testing tools like axe-core in their CI/CD pipeline
- Projects requiring detailed, exportable reports for accessibility compliance audits
Pros & Cons
Pros
Displays garish pink error boxes in Comic Sans directly on problematic elements, making issues impossible to ignore as described in the README for quick identification during development.
As a bookmarklet, it can be dragged to the browser bookmarks bar and activated with one click, requiring no setup or configuration, which simplifies usage based on the demo page instructions.
Scans for common HTML errors and accessibility issues including deprecated elements, malformed links, and missing ARIA landmarks, covering multiple problem types listed in the README.
The obnoxious presentation encourages developers to learn and fix markup problems quickly, aligning with the project's philosophy of using visual punishment to improve code quality.
Cons
Errors are only displayed visually on the page with no option to export, log, or save findings for further analysis or documentation, limiting its use in formal testing workflows.
The error messages use a fixed pink Comic Sans style that cannot be customized, which might be distracting or not fit into all development environments, as admitted by the project's deliberate obnoxious approach.
Relies on bookmarklet functionality which may not work consistently across all browsers or in headless testing environments, reducing its reliability in automated setups.
Frequently Asked Questions
Related Projects
Single Div Project☝️One <div>. Many possibilities.
Live editor for CSS and LESSSource code for Chrome/Edge/Firefox/Opera extension Magic CSS (Live editor for CSS, Less & Sass)
Xpath-to-selectorconvert xpath to css selector
GradientArtAn advanced CSS gradient editor with layering, design tools and free cloud storage
Found a gem we're missing?
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.