Improve the layout nd use of icons in BCD tables

[schalkneethling]

I personally think that inconsistent icons can be good for accessibility, your example is super nice-looking but the circle icons can be a bit hard to tell apart at a quick glance if one has poor eyesight or red-green colorblindness.

Here is what yours looks like put through Chrome's deuteranopia color filter (the most common form of colorblindness):

I took a stab at making a mock-up, here is my attempt:

Before:

After:

It's not as pretty as yours but the checkmark is visually distinguished from the X and question mark.

Originally posted by @Andrew6rant in https://github.com/mdn/yari/issues/5546#issuecomment-1078552004

[schalkneethling]

@ddbeck, I would appreciate your feedback on the above proposal. Thanks! Also see https://github.com/mdn/yari/issues/5804 which is essentially the same discussion.

[Andrew6rant]

Thanks for posting it!

Here also is my concept put through the deuteranopia filter:

[caugner]

Duplicate of https://github.com/mdn/yari/issues/5804:

In the mean-time, we have addressed the readability of the BCD tables by using circles only for no support, unknown support and pre-release feature (see here):