At Hive, we are unwavering in our belief that digital experiences should be accessible to everyone, without exception. Our commitment to accessibility is not just about compliance; it's about creating a web that empowers all users, regardless of their physical, cognitive, or sensory abilities. The Hive Design System is built with this commitment at its core, ensuring that our components, styles, and tools follow and exceed global accessibility standards.
Global Accessibility Standards
We align with the World Wide Web Consortium (W3C)'s Web Accessibility Initiative (WAI), adhering to the Web Content Accessibility Guidelines (WCAG) and contributing to a more accessible internet.
Hive Design System is more than a set of guidelines; it's a commitment to creating a digital world that's inclusive, understanding, and accessible to everyone. By integrating Hive into your projects, you're not just designing; you're opening up your digital experiences to the entire world, without barriers.
Tools and Resources
We provide a suite of tools and resources designed to aid in creating accessible digital products. Our guidelines and design tokens are crafted to make compliance straightforward and intuitive:
Accessibility through Color Contrast
In the Hive Design System, we recognize the importance of accommodating a wide range of visual impairments, including low vision, color blindness, and complete blindness. Our components are designed with the entire spectrum of visual needs in mind. However, it's crucial for designers to apply these components thoughtfully to maintain accessibility standards, particularly regarding color contrast.
Color Contrast
Color contrast is essential for making content accessible to users with visual impairments. Hive is dedicated to adhering to WCAG AA standards for color contrast across all themes within our system. This commitment ensures that our designs are not only visually appealing but also accessible to everyone.
Contrast Ratios Defined
To meet accessibility standards, we adhere to specific contrast ratios for various elements:
Standard Text: Must have a contrast ratio of at least 4.5:1.
Large Text: Text that is at least 24 px in regular and light fonts or 19 px in semi-bold font must have a contrast ratio of 3:1.UI Components: Visual information used to indicate states, boundaries, and interactive elements must also have a contrast ratio of at least 3:1 against adjacent colors.
Designing with Contrast in Mind
Text on Non-Static Backgrounds: When placing text over backgrounds that may change (like gradients or images), ensure the text color maintains the required contrast ratio throughout all states and movements.
Non-Text Contrast: Elements that aren't text but are crucial for interaction, such as buttons and interactive icons, must be easily distinguishable from their background, adhering to the 3:1 contrast ratio.
Color Use and Color Blindness
Beyond Color: It's vital not to rely solely on color to convey information, indicate actions, prompt responses, or distinguish elements. This approach ensures that content is accessible to users with color vision deficiencies.
Color Blindness Considerations: Utilizing tools like color-blind simulators can greatly enhance the accessibility of designs. For those using Figma, the Stark plugin is an excellent resource for checking contrast and simulating color blindness.