This project generates two random colors that meet the Web Content Accessibility Guidelines (WCAG) AAA level for contrast ratios. It displays these colors as foreground and background colors, along with the calculated contrast ratio. Each time you click the page, new colors are generated. Additionally, users can input a specific color and select whether it should be the foreground or background, and the tool will generate a compliant contrasting color.
The Web Content Accessibility Guidelines (WCAG) are a set of recommendations for making web content more accessible, primarily for people with disabilities. WCAG is developed through the World Wide Web Consortium (W3C) process, in cooperation with individuals and organizations around the world.
The AAA level of WCAG provides the highest level of accessibility. For text and images of text:
- Normal text: The contrast ratio must be at least 7:1.
- Large text: The contrast ratio must be at least 4.5:1.
You can learn more about WCAG and its guidelines from the following links:
The primary goal of this project is to help designers and developers quickly generate color combinations that meet the strictest WCAG AAA contrast ratio requirements. This tool ensures that text is readable for users with visual impairments, promoting an inclusive web experience.
I have also created a color contrast tool that randomly generates 7:1 ratio AAA pairings. Feel free to use one hex code from here for inspiration. You could even combine both projects into one website!
For any questions or feedback, you can reach me on:
This project is licensed under the MIT License. This means you are free to use, modify, and distribute the code as long as you include the original license information. See the LICENSE file for more details.
Here are some potential future enhancements for this project:
- Clipboard Tool: Add functionality to copy the generated color codes and contrast ratio to the clipboard for easy use in other projects.
- Dynamic Setup for Different Text Sizes: Implement dynamic generation for normal text (7:1 contrast ratio) and larger text (4.5:1 contrast ratio) to provide a wider range of compliant color combinations.
- Contrast Ratio Toggle: Introduce a toggle feature to switch between A and AAA level contrast ratios, allowing users to see what inaccessible contrast ratios look like and understand the importance of compliance.
Feel free to contribute to the project by cloning and creating new features and making this your own. Together, we can make the web a more accessible place for everyone.