7 ms·

Wherever you're working with colors and text/emblems, please also consider contrast and legibility: <https://apcacontrast.com/ https://apcacontrast.com/>

robin_reala 1y ago
While the above site is great for measuring with a modern contrast algorithm (it’s the current algorithm for the yet-to-be-released WCAG 3 accessibility standards), it’s worth bearing in mind that the WCAG 2 algorithm is somewhat different, and a legal requirement in many markets / industries. You can check your colours against that with a tool like https://www.siegemedia.com/contrast-ratio https://www.siegemedia.com/contrast-ratio, although there are many more.
- seanwilson 1y ago
  You can pick colors that pass both APCA and WCAG contrast checks though so it's not a problem to use APCA recommendations now. I find APCA is a little stricter than WCAG for light themes, and APCA is much stricter than WCAG for dark themes, to the point where you really shouldn't use WCAG for dark themes. So most of the time APCA is giving you stricter contrast that easily pass WCAG also. I keep seeing mentions that APCA will let you finally use e.g. white on orange, or white on vibrant blue that pass APCA but fail on WCAG, but my feeling is there's not a lot of examples like this and most of these pairings only have okay contrast anyway, not great contrast, so it's not ideal to be stuck with WCAG's false negatives but not that big of a deal.
  - robin_reala 1y ago
    If your colours have enough contrast to pass them both then of course that’s fine! I only bring it up because I had a situation last week where the better APCA was giving results for both white-on-colour and #111-on-colour as suitable for headline copy under WCAG3, but #111-on-colour was 7.5:1 and white-on-colour was 2.5:1 under WCAG2, hence we could only use one of them legally.
    - seanwilson 1y ago
      > I only bring it up because I had a situation last week where the better APCA was giving results for both white-on-colour and #111-on-colour as suitable for headline copy under WCAG3, but #111-on-colour was 7.5:1 and white-on-colour was 2.5:1 under WCAG2, hence we could only use one of them legally. Yeah I understand, would you agree this is fairly rare when using APCA though? I've had the opposite where the brand guide was suggesting we use a light on dark combo that passed WCAG2, yet it failed APCA, and worst of all clearly had poor contrast just by looking at it. Yet, some people will still go with it because WCAG2 gave it the okay haha.
      - robin_reala 1y ago
        Rare, yes. Checking with both is definitely recommended!
        seanwilson 1y ago
        Maybe you've seen this but there's also https://github.com/Myndex/bridge-pca https://github.com/Myndex/bridge-pca that does the "this color pair passes both APCA and WCAG2?" check in one pass.
        cb321 1y ago
        As per discussion of this new OKLCH idea in TFA - Are we even sure we have great formulas for measuring/defining contrast in the first place? Do you agree / disagree with any of the counterexamples over at: https://github.com/tattoy-org/contrast-experiments https://github.com/tattoy-org/contrast-experiments
        seanwilson 1y ago
        I'm not following. These examples are using the WCAG2 contrast algorithm which is well known to be flawed for people interested in this stuff, especially for dark themes so there should be lots of bad examples here? APCA is supposed to improve on this (see the example graphic comparing WCAG2 and APCA): https://git.apcacontrast.com/documentation/WhyAPCA.html https://git.apcacontrast.com/documentation/WhyAPCA.html > But as @c-blake has rightly pointed out, this doesn't take into account the ratio of visible background pixels to foreground pixels. For example the contrast required for a single fullstop character, ".", is goting to be diffrent from a capital, "B". So APCA includes more guidance on font weight and font size for more contexts (e.g. headings, body text, shorter text, copyright notices), but it's still going to be an approximation for edge cases like displaying a single fullstop character. If this case is common, you'd want to increase the contrast value instead of going with the minimum passing value, so the contrast algorithms can still help you. There's a tradeoff with having guidelines that are very accurate (e.g. a contrast algorithm that counts pixels) vs simpler to follow (e.g. recommended font weight and size). People already find WCAG2 hard to follow as it is.
- ximm 1y ago
  Any reference to APCA has been removed from the WCAG 3 drafts in 2023 (see https://github.com/w3c/silver/commit/d5b364de1004d76caa7ddc42c0e48860fef3730d https://github.com/w3c/silver/commit/d5b364de1004d76caa7ddc4...). I am not sure what the status is.
  - robin_reala 1y ago
    Oh, interesting, I’d missed that. Good info, thanks!

robin_reala 1y ago

While the above site is great for measuring with a modern contrast algorithm (it’s the current algorithm for the yet-to-be-released WCAG 3 accessibility standards), it’s worth bearing in mind that the WCAG 2 algorithm is somewhat different, and a legal requirement in many markets / industries. You can check your colours against that with a tool like https://www.siegemedia.com/contrast-ratio https://www.siegemedia.com/contrast-ratio, although there are many more.

seanwilson 1y ago
You can pick colors that pass both APCA and WCAG contrast checks though so it's not a problem to use APCA recommendations now. I find APCA is a little stricter than WCAG for light themes, and APCA is much stricter than WCAG for dark themes, to the point where you really shouldn't use WCAG for dark themes. So most of the time APCA is giving you stricter contrast that easily pass WCAG also. I keep seeing mentions that APCA will let you finally use e.g. white on orange, or white on vibrant blue that pass APCA but fail on WCAG, but my feeling is there's not a lot of examples like this and most of these pairings only have okay contrast anyway, not great contrast, so it's not ideal to be stuck with WCAG's false negatives but not that big of a deal.
- robin_reala 1y ago
  If your colours have enough contrast to pass them both then of course that’s fine! I only bring it up because I had a situation last week where the better APCA was giving results for both white-on-colour and #111-on-colour as suitable for headline copy under WCAG3, but #111-on-colour was 7.5:1 and white-on-colour was 2.5:1 under WCAG2, hence we could only use one of them legally.
  - seanwilson 1y ago
    > I only bring it up because I had a situation last week where the better APCA was giving results for both white-on-colour and #111-on-colour as suitable for headline copy under WCAG3, but #111-on-colour was 7.5:1 and white-on-colour was 2.5:1 under WCAG2, hence we could only use one of them legally. Yeah I understand, would you agree this is fairly rare when using APCA though? I've had the opposite where the brand guide was suggesting we use a light on dark combo that passed WCAG2, yet it failed APCA, and worst of all clearly had poor contrast just by looking at it. Yet, some people will still go with it because WCAG2 gave it the okay haha.
    - robin_reala 1y ago
      Rare, yes. Checking with both is definitely recommended!
      - seanwilson 1y ago
        Maybe you've seen this but there's also https://github.com/Myndex/bridge-pca https://github.com/Myndex/bridge-pca that does the "this color pair passes both APCA and WCAG2?" check in one pass.
        cb321 1y ago
        As per discussion of this new OKLCH idea in TFA - Are we even sure we have great formulas for measuring/defining contrast in the first place? Do you agree / disagree with any of the counterexamples over at: https://github.com/tattoy-org/contrast-experiments https://github.com/tattoy-org/contrast-experiments
        seanwilson 1y ago
        I'm not following. These examples are using the WCAG2 contrast algorithm which is well known to be flawed for people interested in this stuff, especially for dark themes so there should be lots of bad examples here? APCA is supposed to improve on this (see the example graphic comparing WCAG2 and APCA): https://git.apcacontrast.com/documentation/WhyAPCA.html https://git.apcacontrast.com/documentation/WhyAPCA.html > But as @c-blake has rightly pointed out, this doesn't take into account the ratio of visible background pixels to foreground pixels. For example the contrast required for a single fullstop character, ".", is goting to be diffrent from a capital, "B". So APCA includes more guidance on font weight and font size for more contexts (e.g. headings, body text, shorter text, copyright notices), but it's still going to be an approximation for edge cases like displaying a single fullstop character. If this case is common, you'd want to increase the contrast value instead of going with the minimum passing value, so the contrast algorithms can still help you. There's a tradeoff with having guidelines that are very accurate (e.g. a contrast algorithm that counts pixels) vs simpler to follow (e.g. recommended font weight and size). People already find WCAG2 hard to follow as it is.
ximm 1y ago
Any reference to APCA has been removed from the WCAG 3 drafts in 2023 (see https://github.com/w3c/silver/commit/d5b364de1004d76caa7ddc42c0e48860fef3730d https://github.com/w3c/silver/commit/d5b364de1004d76caa7ddc4...). I am not sure what the status is.
- robin_reala 1y ago
  Oh, interesting, I’d missed that. Good info, thanks!