Line height is below minimum value - issue reported by Accessibility Checker

[honzapara]

We have a AAA accessibility problem on the site.

Line height is below minimum value
The line-height for paragraphs should be at least 1.5 times the font size.

Line height should be increased to be at least 1.5 in nsw-design-system/src/global/scss/settings/_theme.scss

Current values:

  /* Font */
  --nsw-font-family: 'Public Sans', sans-serif;
  --nsw-font-size: 16px;
  --nsw-line-height: 1.5;
  --nsw-font-normal: 400;
  --nsw-font-bold: 700;

  --nsw-font-size-xxs-mobile: #{rem(12px)};
  --nsw-font-size-xxs-desktop: #{rem(12px)};
  --nsw-line-height-xxs-mobile: 1.5;
  --nsw-line-height-xxs-desktop: 1.5;

  --nsw-font-size-xs-mobile: #{rem(14px)};
  --nsw-font-size-xs-desktop: #{rem(14px)};
  --nsw-line-height-xs-mobile: 1.35;
  --nsw-line-height-xs-desktop: 1.35;

  --nsw-font-size-sm-mobile: #{rem(16px)};
  --nsw-font-size-sm-desktop: #{rem(16px)};
  --nsw-line-height-sm-mobile: 1.5;
  --nsw-line-height-sm-desktop: 1.5;

  --nsw-font-size-md-mobile: #{rem(18px)};
  --nsw-font-size-md-desktop: #{rem(20px)};
  --nsw-line-height-md-mobile: 1.33;
  --nsw-line-height-md-desktop: 1.4;

  --nsw-font-size-lg-mobile: #{rem(22px)};
  --nsw-font-size-lg-desktop: #{rem(24px)};
  --nsw-line-height-lg-mobile: 1.25;
  --nsw-line-height-lg-desktop: 1.33;

  --nsw-font-size-xl-mobile: #{rem(28px)};
  --nsw-font-size-xl-desktop: #{rem(32px)};
  --nsw-line-height-xl-mobile: 1.25;
  --nsw-line-height-xl-desktop: 1.25;

  --nsw-font-size-xxl-mobile: #{rem(36px)};
  --nsw-font-size-xxl-desktop: #{rem(48px)};
  --nsw-line-height-xxl-mobile: 1.25;
  --nsw-line-height-xxl-desktop: 1.25;

Accessibility check done by Chrome extension - Acessibility Checker

[anna-yeshtukova]

Hi Jan,

As you mentioned minimum line height (1.4.8 Visual Presentation) is a level AAA requirement. NSW Design System built to support AA level and therefore can use smaller line height. However all default line heights are defined in CSS variables so you can easily overwrite it to pass AAA if required.

Please let me know if you need any further assistance with changing it.

Kind regards,
Anna Yeshtukova.

[honzapara]

Hi Anna,

thanks for the reply.
We are able to change the variables ourselves, no worries.