dotcom-rendering icon indicating copy to clipboard operation
dotcom-rendering copied to clipboard

Accessibility colour improvements for DCR cards

Open HarryFischer opened this issue 2 years ago • 4 comments

Culture kicker fails currently

HarryFischer avatar May 20 '22 08:05 HarryFischer

The old and new colours are laid out side-by-side in this Figma file: https://www.figma.com/file/5CfbWOeZPRi15lXBD5u1rW/?node-id=160%3A4026

This is a summarised list of the things that need to change:

  • [ ] All Opinion cards The opinion.400 colour is being changed within Source to #C74600 which will make the text accessible
  • [ ] All Culture cards The culture.350 colour is being changed within Source to #866D50 which will make the text accessible
  • [ ] Standard Labs card The labs.400 colour needs to be replaced with the new labs.200 #0C7A73
  • [ ] Live Blog cards The kicker and all metadata needs to change to neutral.100, other than Labs
  • [ ] Media cards Make the metadata neutral.86 across all variants
  • [ ] Special Report Comment card Replace opinion.550 with brandAlt.400 and change the multiline colour to neutral.46
  • [ ] Special Report cards Make the metadata neutral.86 across all variants
  • [ ] Metadata across all cards should be either neutral.46 for pale cards, neutral.86 for dark cards, neutral.100 for live blog cards, and #606060 for some fronts palettes cards

Bryony-Szekeres avatar May 27 '22 11:05 Bryony-Szekeres

I'm happy to pick this up, assuming that no-one's already actively working on it?

bryophyta avatar Aug 03 '22 15:08 bryophyta

Standard Labs card The labs.400 colour needs to be replaced with the new labs.200 #0C7A73

This colour is currently being set by the default fall-through of using pillarPalette[format.theme].main:

https://github.com/guardian/dotcom-rendering/blob/e6810b910f1cb656d75100af5239e9b108e38e04/dotcom-rendering/src/web/lib/decidePalette.ts#L468-L469

So it could be resolved by updating the value used for main for labs, but these palettes are deprecated, so it might be better to refactor and add an explicit case for Labs kickers.

@oliverlloyd it looks like you were involved in deprecating pillars.ts -- is there any context you can provide on how we should approach it moving forwards for refactors like this?

bryophyta avatar Aug 03 '22 16:08 bryophyta

is there any context you can provide on how we should approach it moving forwards for refactors like this?

pillarPalette is just a convenience helper, you can replace it with a switch statement that gives you more flexibility. We deprecated it because we wanted decidePalette to be the one central place where colour is decided and to not have multiple 'palettes' in different places.

AMP still uses the old palette but outside of this the only other place we use it is in decidePalette.

oliverlloyd avatar Aug 03 '22 16:08 oliverlloyd

@bryophyta is this done now? I think 'Live' kickers look odd in white so might suggest changing back to a pale colour. I can add this in a new ticket though?

HarryFischer avatar Dec 02 '22 10:12 HarryFischer

Some of these were fixed, but others had some questions or discussion which didn't get resolved.. Maybe given that this ticket is quite old now it would be best to just raise new tickets for any issues that you're aware of? Then we know what to prioritise 👍

bryophyta avatar Dec 02 '22 17:12 bryophyta