Commits on Jun 13, 2023

1. Fix text contrast of disabled radio buttons …

   We have noticed that when radio buttons have the `disabled` attribute
   set[1], the text does not meet WCAG standards[2] for colour contrast.
   This is true for the label[3], and worse for the hint text[4].
   
   This is caused by some CSS in GOV.UK Frontend[5].
   
   I propose:
   - using the secondary text colour for
     - the radio button itself
     - the label text
     - the hint text
   - using a light grey fill to give an additional visual cue that the
     choice can’t be filled in by clicking it
   
   ***
   
   1. Using `disabled` is not often the best way to do things (and is not
      documented in the Design System) but sometimes it’s appropriate
   2. WCAG 2.0 AA requires a contrast ratio of 4.5:1 for ‘normal text’
   3. `$govuk-text-colour` with `opacity: .5` applied computes to a value
      of  `#858585`, which gives a contrast ratio of 3.69:1 against a white
      background
   4. `$govuk-secondary-text-colour` with `opacity: .5` applied computes to
      a value of  `#a8acae`, which gives a contrast ratio of 2.28:1 against
      a white background
   5. https://github.com/alphagov/govuk-frontend/blob/fbed2b59889aff35fd1c65f1cd5ad368a5e4ddfe/packages/govuk-frontend/src/govuk/components/radios/_index.scss#L137
   6. Colour alone isn’t used here to differentiate – there is the
      semantics of the `disabled` attribute itself, the different cursor
      behaviour, and the content of the hint text

   

   quis committed Jun 13, 2023
   Configuration menu

   • View commit details
   • Copy full SHA for c58491d
   • Browse repository at this point

   Copy the full SHA

   c58491d View commit details

   Browse the repository at this point in the history