Focused inputs, textareas and file uploads may not have enough contrast when in the 'error' state

For the input and textarea components, we rely on the input border getting thicker in order to meet WCAG 2.1 1.4.11: Non-text Contrast.

When the text input or textarea is in the error state, it already has a thicker border, and so the border only changes from red to black (in addition to the yellow outline). ~The contrast between the red and the black is only 2.75:1.~ EDIT: The contrast between the red (#d4351c) and black (#0b0c0c) is 4.03:1 – see https://github.com/alphagov/govuk-frontend/issues/1820#issuecomment-698253481.

[christopherthomasdesign]

Had a little look into this.

I think we can mostly solve this problem by reducing the error border width on inputs down to 2px. Fields with an error would continue to be differentiated from others by the thicker left border and bold error text. The red colour of the input border can be seen as an enhancement, same as the other elements.

Then when you focus it, the existing wider black border makes it clear that it’s being focused.

On the file upload error specifically, it seems like it would work fine without another border surrounding the button anyway:

The only example where I’m not sure this works is something like a date input. Here you can have a group of related fields that share an error message, but where only one field has an error. The current styling means the errored field is differentiated from others by a thicker border. That’s lost when you use a 2px border, where only the red colour makes it different:

This might not be a big problem though. In the case above the error message specifically says which field has an error, ~and it is the only field without any saved data in it~. You could add a bit of extra emphasis to the errored field by bolding its label though:

I guess I’m saying I think I’ve solved it but would be good to know:

• if there are things I haven’t considered
• any impacts you could see these changes having on other patterns or components

[MalcolmVonMoJ]

Here is the page as it appeared when the research was done, warts and all.