IV. Design System and Accessibility

DesignSystem

Design system

A first iteration of a design system was created for the MemoReel project. This deliverable became the source of truth and it contains detailed documentation of the elements of the design, and rules and examples that govern the use of these elements. The idea, for now, is to incrementally improve the design system as new features and components are added. Below, you will find an examples of the level of detail for each component within this version of the design system.  

Button-long-solid-1
Button-long-solid-2
Button-long-solid-3
Button-long-solid-4
2.2-Movie-details-screen

Accessibility

As a starting point, the main focus on accessibility was directed towards color and color contrast for text and design components (e.g. buttons, forms, etc). I followed the WCAG 2.1 guidelines as an indicator for minimum requirements, as seen in the images below.   

Accessibility-Guidelines-Typography
Accessibility-Guidelines-Buttons

The overall goal was to achieve a minimum level of conformance (AA), which requires a 3:1 contrast ratio, for all text and design components. The tables below show the different color contrasts applicable to the MemoReel project.   

Accessibility1
Accessibility2
Accessibility3
Accessibility4

This section will be updated as more accessibility considerations are incorporated. The MemoReel team is aware that accessibility goes beyond color contrast compliance.