Color Accessibility Practice
This is a practical application of what I’ve learned in the UXcel Accessibility course. The goal is to test and optimize color contrast for both light and dark themes, ensuring compliance with WCAG 2.1 standards.
In this exercise:
- I evaluated badge colors like “Closed,” “Negotiation,” and “Prospecting” for contrast on both white and black backgrounds.
- I ensured each label passes the minimum 4.5:1 contrast ratio required for normal text.
- I compared both light mode and dark mode to confirm legibility across themes.
✅ Accessible design = better usability for everyone, including users with low vision or color blindness.
Reviews
7 reviews
Great you aware and emphatize with the user have some accessbility, the showcase you show it great and better
This is a thoughtful and well-executed approach to color accessibility. The contrast choices are clear and considerate, making the design both inclusive and visually appealing. Great work!
Hey Rawan,
This is a very well-executed exercise! I can see you put great care into both light and dark modes, and they both look super clean and clear. Designing accessible tables is tricky, but you nailed it.
Great job!
Well done
Rawan, this is a clear and well-applied exercise showcasing your understanding of color accessibility principles from the UXcel Accessibility course. I especially appreciate your structured approach to validating contrast across both light and dark modes, which is a critical yet often overlooked aspect of inclusive design.
Testing with WCAG 2.1 standards shows a strong grasp of best practices.
The specific focus on badge labels like “Closed,” “Negotiation,” and “Prospecting” illustrates real-world thinking great choice for a practical application.
Including both light and dark themes demonstrates consideration for different user preferences and accessibility contexts.
If you want to take this further, I’d suggest:
- Adding quick before-and-after visual comparisons to highlight the improvement in contrast.
- Briefly explain how you used Figma (e.g., any plugins or tools for testing contrast).
Overall, great work, your effort in ensuring a usable, inclusive design will resonate with others in the community. Keep it up!
Great Job I personally loved it😍🔥
I really liked it! The colours are pretty and really outstanding in the background colors.
You might also like
Sojo NFT Marketplace
Heuristic Evaluation of Revolut Mobile App
From Idea to Full-Stack Web App
Hulu Through My Eyes - A Cinematic UI Exploration (unofficial)
Docto
Fundraising Website
Visual Design Courses
UX Design Foundations
Introduction to Figma
Design Terminology
