♿(frontend) improve editor a11y and brand/neutral contrast

[Ovgodd]

Purpose

Fix AXE accessibility issues related to color contrast

@rl-83 I made a small adjusment to pass WCAG AA requirements, do you think it is ok for you ? the ratio was a bit low

Proposal

• - Show AXE report: previous colors failed WCAG AA (contrast ratios were ~4.48–4.49, below the 4.5:1 threshold).
• - Propose and implement color changes to meet WCAG AA requirements.
• - Updated tertiary text colors:
• - from --c--globals--colors--brand-500 → --c--globals--colors--brand-550
• - from --c--globals--colors--gray-500 → --c--globals--colors--gray-550

[github-actions]

Size Change: -2 B (0%)

Total Size: 4.11 MB

Filename	Size	Change
apps/impress/out/_next/static/css/1af729eeb6c19828.css	0 B	-48.7 kB (removed)	🏆
apps/impress/out/_next/static/fa7e6e11/_buildManifest.js	0 B	-906 B (removed)	🏆
apps/impress/out/_next/static/css/596fdb4eee2217d8.css	48.7 kB	+48.7 kB (new file)	🆕
apps/impress/out/_next/static/de9edea3/_buildManifest.js	906 B	+906 B (new file)	🆕

_{compressed-size-action}

[AntoLC]

We cannot update directly this file (https://github.com/suitenumerique/docs/blob/6c511e1854757d333a4ea6bf5f05b5cff00ea7c9/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css), it is auto-generated.

To generate it we do yarn build-theme:

docs/src/frontend/apps/impress/package.json

Line 12 in 8036f16

"build-theme": "cunningham -g css,ts -o src/cunningham --utility-classes && yarn prettier && yarn stylelint --fix",

If you want to modify colors it should be here:
https://github.com/suitenumerique/docs/blob/main/src/frontend/apps/impress/cunningham.ts

If the color modification is about the dsfr theme, the colors update chould be in the ui-kit repository, if it is in the generic theme, it should be on our side:

docs/src/frontend/apps/impress/cunningham.ts

Lines 87 to 93 in 8036f16

	const genericTheme = {
	generic: {
	globals: {
	colors: {
	'brand-050': '#EEF1FA',
	'brand-100': '#DDE2F5',
	'brand-150': '#CED3F1',

[Ovgodd]

We cannot update directly this file (https://github.com/suitenumerique/docs/blob/6c511e1854757d333a4ea6bf5f05b5cff00ea7c9/src/frontend/apps/impress/src/cunningham/cunningham-tokens.css), it is auto-generated.

To generate it we do yarn build-theme:

docs/src/frontend/apps/impress/package.json

Line 12 in 8036f16

"build-theme": "cunningham -g css,ts -o src/cunningham --utility-classes && yarn prettier && yarn stylelint --fix",

If you want to modify colors it should be here: https://github.com/suitenumerique/docs/blob/main/src/frontend/apps/impress/cunningham.ts

If the color modification is about the dsfr theme, the colors update chould be in the ui-kit repository, if it is in the generic theme, it should be on our side:

docs/src/frontend/apps/impress/cunningham.ts

Lines 87 to 93 in 8036f16

	const genericTheme = {
	generic: {
	globals: {
	colors: {
	'brand-050': '#EEF1FA',
	'brand-100': '#DDE2F5',
	'brand-150': '#CED3F1',

Thanks again for the detailed explanation,

Just to confirm the approach on our side for the generic theme:
would you agree that the right fix is to slightly darken brand-500 (and possibly gray-500) in genericTheme.globals.colors in cunningham.ts, after aligning on the exact hex values with @rl-83, and then regenerate cunningham-tokens.css via yarn build-theme?

For the DSFR theme in the ui-kit repo, we seem to have a very similar contrast issue.
Once we’ve validated the new colors with Robin for the generic theme, I can open a follow‑up PR or an issue for the DSFR tokens

[rl-83]

As discussed with @Ovgodd today, there is a mapping issue between the primitive colors and the contextual colors. Here is the correct approach according to the UI kit:

COLOR PRIMITIVE → COLOR CONTEXTUAL
Brand/550 → Content/Semantic/Brand/Tertiary
Gray/550 → Content/Semantic/Neutral/Tertiary
...

Figma for reference

On the UI kit side, I checked with @PanchoutNathan, and there is indeed a mapping issue with the UI kit and Cunningham, specifically between 500 and 550. He’ll take care of it whenever he finds the time. Keep you informed