fix: make text colors legible #3250
Conversation
|
Did we also test the contrast for the background of the |
|
As per Storybook, there seem to be multiple components that have updated. I am not sure if some of the color combinations are aesthetically okay e.g. this one with the error box and the field error having different reds. |
|
@AbhineetJain yeah, background and text colors should differ, that's ok. The contrast between the ErrorSummary background and its text is good but between the background and the More/Less link is not good, so I'll need to tweak that or note it for later. I'll keep going through Chromatic... |
|
Ok, I lightened the color in our palette that's used for links, so we'll see what changes that causes! It does fix the contrast in the Error Summary. |
|
Lightening all links made them too un-obvious, I think, so I just |
Fixes #3222
Fixes #3230
error.maincolor to a lighter one for legible color contrast in validation error messagescontrastTextto more parts of the palette so we use it instead of defaulting to illegible near-blackerror.darkas the button background instead oferror.main. Hover styles darken a color, anderror.darkis VERY dark currently, so I had it start at a lightened version and darken to the standard.The color palette will need more work - the color contrast between button background and text doesn't pass accessibility tests on other buttons (the blue ones). But this PR improves the most egregious places I had seen.
Testing
Validation messages
Given I am logged out,
When I type a letter in the email field and then click on the password field,
Then I see a legible validation message
Dialogs
Given I have created a new user,
When I suspend that user,
Then I see a confirmation dialog with legible buttons