Rules to Better Accessibility - 2 Rules
The internet has become a part of daily life, but not everyone uses it in the same way.Web Content Accessibility Guidelines (WCAG) are a set of formal standards aimed to address this problem.Conform to WCAG and make your website accessible to everyone, regardless of their abilities or the way they navigate it.
The 4 Principles (P.O.U.R.)
WCAG consists of 4 high-level principles. Each principle is broken down into a number of sub-criteria.
1: Perceivable
- Text Alternatives (1.1): Provide text alternatives for non-text content.
- Time-based Media (1.2): Provide alternatives and captions for multimedia content.
- Adaptable (1.3): Present content in different ways without losing information or structure.
- Distinguishable (1.4): Ensure content is readable, with sufficient color contrast and text sizing options.
2: Operable
- Keyboard Accessible (2.1): Ensure all functionality can be operated via a keyboard.
- Enough Time (2.2): Provide users enough time to read and complete tasks.
- Seizures and Physical Reactions (2.3): Do not design content that is known to cause seizures or physical discomfort.
- Navigable (2.4): Create a navigable and intuitive user interface.
- Input Modalities (2.5): Ensure compatibility with input methods beyond just a keyboard.
3: Understandable
- Readable (3.1): Make content readable and understandable.
- Predictable (3.2): Create a consistent and predictable UI.
- Input Assistance (3.3): Help users avoid and correct errors.
4: Robust
- Compatible (4.1): Optimize compatibility with current and future technologies.
Key terms
The following are some key concepts that can help make WCAG easier to understand.
- WCAG versioning: The guidelines are updated at irregular intervals so it's important to be clear which version you're referencing. E.g. WCAG 2.2.
- Conformance level: The degree to which a website complies with WCAG. Level A is must-have, AA is should-have (a common target), and AAA represents maximized accessibility.
- Success Criteria: Each WCAG principle contains sub-categories which themselves contain specific success criteria. This means when you reference a success criterion it will have a number like "2.4.1: Bypass Blocks".
- WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications): A specification of semantic requirements for assistive technologies like screen readers.
WCAG criterion 1.4.3: Contrast (Level AA) recommends text, images of text, and graphics (e.g. icons) have a contrast ratio of at least 4.5:1. Always check your colors and make your content readable regardless of a user’s ability or circumstance.
Contrast checkers
Most automated accessibility checkers or browser plugins will check color contrast.However, try to avoid contrast issues from being flagged altogether!Use dedicated color checkers to determine acceptable color combinations before implementation.Always keep in mind that opacity and font weight affect contrast too.
Recommended tools include:
- WhoCanUse – Highly detailed, includes color blindness, sunlight, and low vision checks
- Adobe Color – A vs AA vs AAA compliance checks, import colors from a file, color blindness tools
- Coolors – Simple, easy to use tool for beginners
Figure: Bad example – Black text on SSW Red fails contrast checks 
Figure: Good example – White text on SSW Red passes contrast checks Notable exceptions
There are few acceptable exceptions to the contrast criteria, including:
- Incidental text (disabled, inactive, hidden, or purely decorative)
- Logos (Text included in a logo or brand name)
- Large-scale text (which only needs to meet a contrast ratio of 3:1)
Even in these circumstances it’s good practice to make your text as readable as possible.
