Merge pull request #299 from WestpacGEL/fixes/flexicell-style

Fixes/flexicell style

apps/site/src/components/code/code.inject-components.ts

@@ -69,6 +69,10 @@ export {
   SettingsIcon,
   WatchIcon,
   EmailIcon,
+  GiftIcon,
+  WarningIcon,
+  PadlockIcon,
+  SuccessIcon,
 } from '@westpac/ui/icon';
 
 export { GiftPictogram } from '@westpac/ui/pictogram';

apps/site/src/content/design-system/accessibility/colour-vision-impairment/design/What is a colour vision impairment/content.mdoc

@@ -0,0 +1,49 @@
+Within the accessibility pages of this site, you will find the colour impairment demonstration tool, this tool allows you to view the components as someone with a colour vision impairment would perceive them.
+
+Colour vision impairment is something that impacts people (mostly men) across the board, it is a condition that affects how the cone photoreceptors in the retinas detect the colour frequencies of light. It can stop them from being able to perceive different colours.
+
+Some famous people who are considered _'colour blind'_:
+
+- Mark Zuckerberg - Founder of Facebook
+- Bill Clinton - 42nd president of the United States
+- Jamie Oliver - Celebrity chef
+
+Colour vision impairments can either be inherited or acquired. Inherited colour impairment is passed down genetically from parents to children (primarily from mother to son). Acquired colour impairment can be the result of chronic illness, accidents, chemicals, medications or age.
+
+Part of the process used when defining the design system brand colours, is to make sure that foreground and background colour combinations have the appropriate colour contrast luminosity ratios (in compliance with WCAG 2.1 AA). Adhering to this contrast ratio allows all our customers to differentiate our brand colours. We also highlight the situations where our brand colours will not have a high enough contrast ratio to be used together.
+
+Our colour vision impairment tool allows us to view the design system components as someone with an impairment would see them. It shows how important it is to ensure that when designing, you should never rely on a difference in colour alone to communicate to your users.
+
+Each of the filters in the colour impairment tool shows how the perception of colour is affected by different conditions, very broadly these are:
+
+## Protanopes
+
+- _Protanopia_ - No sensitivity to red light.
+- _Protanomaly_ - Reduced sensitivity to red light.
+
+Protanopes tend to find it difficult to distinguish greens, yellows, oranges, reds and browns from each other.
+
+## Deuteranopes
+
+- _Deuteranopia_ - No sensitivity to green light.
+- _Deuteranomaly_ - Reduced sensitivity to green light.
+
+Deuteranopes are likely to confuse colours such as green and yellow, or blue and purple, they may also struggle to distinguish between pink and grey or white.
+
+## Tritanopes
+
+- _Tritanopia_ - No sensitivity to blue light.
+- _Tritanomaly_ - Reduced sensitivity to blue light.
+
+Tritanopes tend to find it difficult to see the difference between light blues and greys, dark purples and black, mid-greens and blues and oranges and reds.
+
+## Monochromacy
+
+- _Achromatopsia_ - Reduced sensitivity to all colours.
+- _Achromatomaly_ - No sensitivity to colour.
+
+Monochromats see the world in black, white and shades of grey. Less severe cases may perceive small traces of specific colours, when the light conditions are just right.
+
+## Low-contrast
+
+People with a vision impairment that effects their perception of contrast will struggle to see the difference between colours that do not have enough contrast between them, ie light grey against white.