AA is the minimum conformance target across colour, navigation, forms, and feedback.
07 Accessibility
Accessibility Guidelines
Mealchemy targets WCAG 2.2 Level AA with readable text, visible labels, accessible touch targets, and consistent focus and error states.
Keyboard focus uses a 3px gold outline on links, buttons, and inputs.
Motion is reduced when the user's device requests fewer animations.
Approved foreground/background pairs are documented and checked below.
Keyboard Navigation
Focus order and indicators
Interactive elements must be reachable in a logical order with no keyboard trap. The active element receives a visible gold focus ring.
1234
Tab order follows page structure: navigation, filters, form fields, then primary actions.
Tab
Moves forward through controls.
Shift + Tab
Moves backward without trapping the user.
Enter / Space
Activates buttons, chips, and navigation controls.
Escape
Closes modals and bottom sheets.
Assistive Technology
Screen readers and reduced motion
Meaningful controls need clear accessible names. Decorative visuals stay out of the accessibility tree.
Announced as
Save roasted tomato pasta, button.
Icon-only controls require specific labels. Images need useful alt text unless decorative.
Used for sign-in and account recovery.
Labels remain visible and helper or error text is connected to the relevant field.
Default motion
Reduced motion
When reduced motion is requested, decorative movement becomes instant or is skipped.
Animated widgets check the user's motion preference and switch to near-instant timing when needed.
The add-ingredient route returns the screen immediately instead of sliding it in when reduced motion is enabled.
The user still gets the same content and controls, with selection and swipe motion reduced.
WCAG 2.2 Level AA Adherence
These are the WCAG standards Mealchemy is aiming to meet, with the design guideline we will follow for each one.
Minimum Contrast: Text
WCAG Standard
Normal text requires 4.5:1 contrast. Large text requires 3:1.
Mealchemy Guideline
Use only approved text/background pairings from the contrast table. Muted text is reserved for non-actionable supporting copy on light backgrounds.
Non-Text Contrast
WCAG Standard
Meaningful icons, focus indicators, and interactive component boundaries require 3:1 contrast against adjacent colours.
Mealchemy Guideline
Buttons, icons, focused input borders, and semantic states must use contrast-safe maroon, gold, or semantic colours. Decorative dividers must not be the only source of meaning.
Use of Colour
WCAG Standard
Colour must not be the only way information is communicated.
Mealchemy Guideline
Pair every colour state with text, a number, or an icon. Pantry status, form validation, and match badges must all remain understandable without colour alone.
Target Size
WCAG Standard
Interactive targets should be at least 44x44 CSS pixels.
Mealchemy Guideline
Keep medium buttons at 48dp, large buttons at 56dp, and icon buttons at 48dp unless a specific layout needs a larger value.
Info and Relationships
WCAG Standard
Visual structure and relationships must also be available programmatically.
Mealchemy Guideline
Use accessible labels for meaningful controls and status information. Exclude decorative imagery from the accessibility tree.
Identify Input Purpose
WCAG Standard
Inputs should programmatically identify their purpose so assistive tools can present the right keyboard or autofill support.
Mealchemy Guideline
Give every form field a visible label, plus the correct input type and autofill support where relevant.
Resize Text
WCAG Standard
Text must remain readable and functional up to 200% scaling without loss of content or functionality.
Mealchemy Guideline
Use flexible layouts that respect device text scaling. Test at 1.0x, 1.3x, and 2.0x before release.
Keyboard
WCAG Standard
All functionality must be operable with a keyboard, with no keyboard traps.
Mealchemy Guideline
Ensure every action is keyboard reachable on tablet and desktop layouts, with visible focus feedback on fields, buttons, and navigation items.
Error Identification
WCAG Standard
Detected errors must be identified and described in text.
Mealchemy Guideline
Use specific written error messages, such as "Incorrect password. Try again.", instead of generic error labels.
Labels or Instructions
WCAG Standard
Form fields must include labels or instructions.
Mealchemy Guideline
Avoid placeholder-only fields. Use persistent visible labels so input purpose remains clear before and after typing.
Colour Independence Examples
State is communicated with both colour and text, so users do not need to rely on colour alone.
Green dot plus label for usable pantry items.
Orange dot plus label for low-stock ingredients.
Red dot plus label for expired pantry items.
! Incorrect password. Try again.
Contrast Table
A contrast ratio compares how different the foreground and background colours are. Higher ratios are easier to read; WCAG AA normally requires 4.5:1 for body text and 3:1 for large text.
| # | Foreground | Background | Ratio | Status |
|---|---|---|---|---|
| 1 | #FFFFFF White | #570013 Primary Dark | 14.84:1 | Pass AA/AAA |
| 2 | #570013 Primary Dark | #FEF9F1 Background Light | 14.16:1 | Pass AA/AAA |
| 3 | #0E0D0B Text Light | #FEF9F1 Background Light | 18.53:1 | Pass AA/AAA |
| 4 | #D4AF37 Gold | #5C0018 Primary | 6.8:1 | Pass AA |
| 5 | #6B7280 Muted | #FEF9F1 Background Light | 4.6:1 | Large text only |
| 6 | #DC2626 Error | #FEF9F1 Background Light | 4.61:1 | Pass AA |
Accessibility Check
Lighthouse and manual checks
The Brand guide was checked with Chrome Lighthouse.
Chrome DevTools Lighthouse returned 100 for Accessibility on all pages.
Approved pairings are shown in the contrast table, including body text, large text, and semantic error states.
Keyboard traversal, screen-reader announcements, modal dismissal, text scaling, and reduced-motion preference should be checked in the app.