More about contrast in components and graphic elements This helps people with colour vision deficiency (colour blindness) who find it difficult to distinguish between certain colours, often shades of red, yellow and green. Text and components, like buttons, must have contrast ratios that meet the contrast minimum for AA of the Web Content Accessibility Guidelines (WCAG 2.1). Read " Do not rely on colour or position alone" in our accessibility guidance. Make sure that what the colour is "saying" is available in other ways. We haven't tested these colours yet for digital use. The NHS Identity Guidelines have an extended colour palette. For example, if you are styling the error state of a component you should use the $nhsuk-error-color Sass variable rather than $color_nhsuk-red. Colour paletteĪvoid using the palette colours if there is a Sass variable that is designed for your context. $color_nhsuk-white is used to make important information stand out and for alternating backgrounds, for example on the NHS website home page. components with important information, like callouts, stand out.the British Dyslexia Association recommends dark text on a light, but not white, background.We use $color_nhsuk-grey-5 as a background tint. For example, if you wanted to use red to represent some data in a graph you should use $color_nhsuk-red rather than $nhsuk-error-color. In all other cases, you should reference the colour palette directly. Only use the variables in the context they’re designed for. This means that your service will always use the most recent colour palette whenever you update. For example, use $nhsuk-text-color rather than #212b32. If you are using NHS.UK frontend or the NHS.UK prototype kit, use the Sass variables provided rather than copying the hexadecimal (hex) colour values. Read more about accessibility and colour on this page. We meet at least level AA for contrast and aim for level AAA as far as possible. Our text and background colours are designed to meet accessibility needs. red for urgent care cards in the pattern to help users decide when and where to get care.yellow for our focus state styles and for warning callouts.We also use colour to help users prioritise and differentiate information - for example we use: Our brand colours help people recognise and trust that our services come from the NHS.