Data Grid WCAG 2.1 contrast requirements

Hi,

My team is currently designing a Data Grid and are working through the design accessibility requirements, specifically contrast ratios for the grid’s various visual elements.

Based on WCAG 2.1 success criterion, we believe we need to meet the following contrast requirements for a predominately read-only grid:


  *   Row text (header, cell, etc): 4.5:1 against row background.
  *   Dividers between rows: No contrast requirement, provided the row text meets 4.5:1. See Boundaries<https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast>
  *   Zebra striping: Decorative. No contrast requirement.
  *   Row hover state: 3:1 against grid background AND/OR an additional visual element is added (e.g., a checkbox).
  *   Row selected state: 3:1 against grid background AND/OR an additional visual element is added (e.g., a checkbox).
  *   Focus state: Focus ring meets 3:1.
  *   Adjacent rows (i.e., multiselect): 3:1 AND/OR an additional visual element is added (e.g., checkboxes) AND/OR there is visual separation (e.g., pixel line break).
  *   Disabled rows (+ their content): No contrast requirement.
  *   Editable cells: Where editable cells are present, the cell’s border must meet 3:1.

There’s a lot of information to interpret and we want to make sure we’re as compliant as possible. Any guidance would be much appreciated.

Thanks,
Ben

DXD

Ben Hopwood


Product Designer
Digital Experience Design
J.P. Morgan


Zoom: benhopwood
Email: benjamin.hopwood@jpmorgan.com





This message is confidential and subject to terms at: https://www.jpmorgan.com/emaildisclaimer including on confidential, privileged or legal entity information, malicious content and monitoring of electronic messages. If you are not the intended recipient, please delete this message and notify the sender immediately. Any unauthorized use is strictly prohibited.