Why do checkboxes and radios have transparent backgrounds?

[davehaigh]

The following came from a question I asked on the design system slack channel.
https://ukgovernmentdigital.slack.com/archives/C6DMEH5R6/p1572279335253200

TLDR: checkboxes and radios have transparent backgrounds. This means they don't stand out visually against non white panels as text input elements do.

From thread:

does anyone know why the checkboxes (and I assume radio buttons) have transparent backgrounds? Rather than a white background (which would probably be the default browser rendering of a standard checkbox).
GOV checkbox (with transparent background):

Default checkbox (without GOV styling):

Anon 1:
I suspect that’s because they’re custom rendered rather than native checkboxes, and we want to support users who change their text and background colours.

11 replies

Anon 2:
Hi Dave,
This decision pre-dates the design system so I'll need to do a bit of digging to see if we can find out why - but my guess is something along the lines of what Anon 1 said. Will come back to you.
Have you seen any problems around this, or are you just wondering?
After some investigation - it appears that his is the pertinent commit: alphagov/govuk_elements@4972b81

Dave Haigh
I am looking at using small checkboxes as a filter for a list. The filters are located on a light grey panel (similar to the call to action blocks on GOV.UK guidance pages). As you can see in the screenshot the checkbox doesn’t stand out well as the background is transparent.

Im not sure on the answer to this but… should the scenario be:

• If user HAS NOT specified any browser background colour then they should be white;
• Else if user HAS a specified background colour in certain modes then they should be either transparent or that colour (when in that mode)

1. Is the above correct?
2. Is it possible?
   3.Also, some other elements do not respect user specified background colours such as text inputs (they’re always white). Why are only the checks and radios transparent?

i’ve specified my background colour to be red (in any mode) in this screenshot:

Anon 3
I don’t really have a good answer for you other than that the radios and checkboxes in the Design System are based on those introduced in Elements back in 2016 by people that no longer work here. As Anon 2 said, we don’t have the context of every historical decision. We could definitely look at changing that behaviour, but we’d need to test thoroughly to make sure they still work in all of these sorts of scenarios.

[jamesmking]

The current styles allow us to change the colour of the entire checkbox and radio button easily. We have a couple of instances across our service where we have a white checkbox on a solid colour. If the checkbox had a solid white background here, then we wouldn’t see the tick.

[NickColley]

For some more context this decision was made in the legacy GOV.UK Elements project: alphagov/govuk_elements#296

I've added awaiting-triage for us to look into this as a team.

[NickColley]

We want to do an investigation into how this would impact users who change their colours, so we're going to put aside an hour to look into this, thanks for raising @davehaigh :)

[robpataki]

Hello @NickColley. I wonder if there is any further development on this topic. I find it strange that most form controls (text input, select and text area) have a defined white background, but checkboxes and radios don't. I gather there must be reasons why radios and checkboxes haven't been given the same background colour to provide consistency in the UI.

It would be great to better understand what the reasons are, and if this is something that is supported by user research or other practical reasons. Any insight would be greatly appreciated.

[querkmachine]

@robpataki Hi Rob,

A quick correction: We don't actually define the white background on text inputs or textareas; these are the user agent styles supplied by the browser. We originally did this because explicitly defining colours (even to make them transparent) used to trigger an accessibility issue in Firefox when using forced colour modes, although this seems to have been fixed since.

Conversely, we explicitly define black text and a white background on <select> inputs because the user agent styles in some browsers are lower contrast than desired.

Unfortunately when it comes to radios and checkboxes, my guess is as good as the commit message in the original post: it's so users who customise their text and background colours get matching styles.