miji.beQR code WCAG compliance is an effort to apply the criteria of the Web Content Accessibility Guidelines (WCAG) to the display / provision of QR codes so that everyone, including users with disabilities, can access them. A QR code is non-text content presented as an image, and 1.1.1 Non-text Content (Level A) in WCAG 2.2 requires that non-text content presented to users have a text alternative that serves the same purpose.
A WCAG-compliant QR code needs several elements. First, state the destination URL or purpose of the QR code as alternative text (the alt attribute). Next, ensure sufficient contrast between the foreground and background colors of the QR code. In WCAG 2.2, the value of 4.5:1 is required by the criterion for text (1.4.3 Contrast (Minimum), Level AA), while the criterion that applies to non-text graphics such as QR codes is 1.4.11 Non-text Contrast (also Level AA), which requires 3:1. This entry treats 4.5:1 as a guideline, allowing a margin for scanning. In addition, placing a text link near the QR code lets people reach the same information even in environments where the QR code cannot be scanned.
Examples of implementation when generating QR codes with a URL shortener service include the following. Display the destination short URL as text directly below the QR code image. In print materials, provide a margin (quiet zone) around the QR code. When offering a color customization feature, build in an automatic contrast ratio check.
As a consideration for people with visual impairments, one approach is to set alternative text or ARIA labels so that screen readers can read out the presence and purpose of the QR code.