Perceivable
Embed This Widget
Add the script tag and a data attribute to embed this widget.
Embed via iframe for maximum compatibility.
<iframe src="https://colorfyi.com/iframe/glossary/perceivable/" width="420" height="400" frameborder="0" style="border:0;border-radius:10px;max-width:100%" loading="lazy"></iframe>Paste this URL in WordPress, Medium, or any oEmbed-compatible platform.
https://colorfyi.com/glossary/perceivable/Add a dynamic SVG badge to your README or docs.
[](https://colorfyi.com/glossary/perceivable/)Use the native HTML custom element.
The first principle of WCAG, requiring that all information and user interface components are presentable to users in ways they can perceive.
The Perceivable principle encompasses all sensory aspects of web content. For color specifically, it means ensuring that text has sufficient contrast with its background (Success Criteria 1.4.3 and 1.4.6), that color is not the only visual means of conveying information (1.4.1), and that content can be presented in different ways without losing structure or information (1.3.1). In practice, this means adding text labels to color-coded elements, providing sufficient contrast ratios, and ensuring that focus states and interactive elements are visible without relying solely on color changes.
Try It Out
Related Articles
Color Accessibility Checklist for Web Developers
A complete color accessibility checklist for web developers covering WCAG contrast ratios, color-alone reliance, focus indicators, testing tools, and automated checks.
Color Gamut Explained: sRGB, P3, and Rec. 2020
Understand color gamuts—sRGB, Display P3, and Rec. 2020—and how to use CSS wide-gamut colors with @media (color-gamut) for modern displays. Practical examples included.
How Many Colors Can the Human Eye See?
The human eye can distinguish roughly 10 million colors. Learn how cone cells work, what tetrachromacy is, and why screens can only display a fraction of what we see.
How to Check Color Contrast for WCAG Compliance
Learn how to check color contrast ratios for WCAG AA and AAA compliance. Step-by-step guide with practical hex code examples and common pitfalls to avoid.