public/uploads/rules/color contrast/rule improvements (PR from TinaCMS)

public/uploads/rules/color-contrast/rule.mdx

@@ -1,18 +1,24 @@
 ---
-archivedreason: null
-authors:
-- title: Jayden Alchin
-  url: https://www.ssw.com.au/people/jayden-alchin/
-created: 2024-01-05 05:06:33+00:00
-guid: 9ab5d07d-8b30-4a11-bb8d-cb01069bc291
-redirects: []
-seoDescription: Meet color contrast requirements to ensure your website's text and
-  images are readable by everyone, including those with visual impairments.
+type: rule
 title: Do you meet color contrast requirements for accessibility?
+uri: color-contrast
 categories:
   - category: categories/design/rules-to-better-accessibility.mdx
-type: rule
-uri: color-contrast
+authors:
+  - title: Jayden Alchin
+    url: 'https://www.ssw.com.au/people/jayden-alchin/'
+  - title: Tiago Araujo
+    url: 'https://www.ssw.com.au/people/tiago-araujo'
+redirects: []
+guid: 9ab5d07d-8b30-4a11-bb8d-cb01069bc291
+seoDescription: 'Meet color contrast requirements to ensure your website''s text and images are readable by everyone, including those with visual impairments.'
+created: 2024-01-05T05:06:33.000Z
+createdBy: Tiago Araujo
+createdByEmail: TiagoAraujo@ssw.com.au
+lastUpdated: 2026-07-31T21:59:11.467Z
+lastUpdatedBy: Tiago Araujo
+lastUpdatedByEmail: TiagoAraujo@ssw.com.au
+archivedreason: null
 ---
 
 WCAG criterion [1.4.3: Contrast (Level AA)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html) recommends text, images of text, and graphics (e.g. icons) have a contrast ratio of at least 4.5:1.
@@ -22,43 +28,59 @@ Always check your colors and make your content readable regardless of a user’s
 
 ## Contrast checkers
 
-Most automated accessibility checkers or browser plugins will check color contrast.
-However, try to avoid contrast issues from being flagged altogether!
-Use dedicated color checkers to determine acceptable color combinations before implementation.
-Always keep in mind that opacity and font weight affect contrast too.
+Most automated accessibility checkers or browser plugins will check color contrast. However, you should try to avoid contrast issues from being flagged altogether!
 
-Recommended tools include:
+Use dedicated color checkers to determine acceptable color combinations **before** implementation.
 
-- [WhoCanUse](https://www.whocanuse.com/) – Highly detailed, includes color blindness, sunlight, and low vision checks
-- [Adobe Color](https://color.adobe.com/create/color-contrast-analyzer) – A vs AA vs AAA compliance checks, import colors from a file, color blindness tools
-- [Coolors](https://coolors.co/contrast-checker) – Simple, easy to use tool for beginners
-
-<imageEmbed
-  alt="Image"
-  size="large"
-  showBorder={false}
-  figurePrefix="bad"
-  figure="Black text on SSW Red fails contrast checks"
-  src="/uploads/rules/color-contrast/color-contrast-bad.jpg"
+<boxEmbed
+  body={<>
+    **Note:** Keep in mind that **opacity** and **font weight** affect contrast too.
+  </>}
+  figurePrefix="none"
+  figure=""
+  style="info"
 />
 
+Recommended tools:
 
-<imageEmbed
-  alt="Image"
-  size="large"
-  showBorder={false}
-  figurePrefix="good"
-  figure="White text on SSW Red passes contrast checks"
-  src="/uploads/rules/color-contrast/color-contrast-good.jpg"
-/>
+* [WhoCanUse](https://www.whocanuse.com/) – Highly detailed, includes color blindness, sunlight, and low vision checks
+* [Adobe Color](https://color.adobe.com/create/color-contrast-analyzer) – A vs AA vs AAA compliance checks, import colors from a file, color blindness tools
+* [Coolors](https://coolors.co/contrast-checker) – Simple, easy to use tool for beginners
+
+<imageEmbed alt="Image" size="large" showBorder={false} figurePrefix="bad" figure="Black text on SSW Red fails contrast checks" src="/uploads/rules/color-contrast/color-contrast-bad.jpg" />
+
+<imageEmbed alt="Image" size="large" showBorder={false} figurePrefix="good" figure="White text on SSW Red passes contrast checks" src="/uploads/rules/color-contrast/color-contrast-good.jpg" />
+
+### Check color contrast on live websites using browser DevTools
+
+Browser DevTools provide a quick way to check color contrast directly on a live website.
 
+How to check contrast in Google Chrome:
+
+1. Open DevTools
+2. Activate the Inspect tool
+3. Hover over an element
+4. View the accessibility tooltip, including the text’s contrast ratio
+
+<imageEmbed alt="Image" size="large" showBorder={true} figurePrefix="none" figure="Google Chrome DevTools showing the accessibility information and contrast ratio for inspected text" src="/uploads/rules/color-contrast/browser-contrast-check.png" />
+
+More info on [ Docs | Chrome | DevTools | Accessibility | Make your website more readable](https://developer.chrome.com/docs/devtools/accessibility/contrast).
+
+<boxEmbed
+  body={<>
+    **Note:** This is also available in Microsoft Edge and Firefox, although the interface may differ slightly.
+  </>}
+  figurePrefix="none"
+  figure=""
+  style="info"
+/>
 
 ## Notable exceptions
 
 There are few acceptable exceptions to the contrast criteria, including:
 
-- Incidental text (disabled, inactive, hidden, or purely decorative)
-- Logos (Text included in a logo or brand name)
-- Large-scale text (which only needs to meet a contrast ratio of 3:1)
+* Incidental text (disabled, inactive, hidden, or purely decorative)
+* Logos (Text included in a logo or brand name)
+* Large-scale text (which only needs to meet a contrast ratio of 3:1)
 
-Even in these circumstances it’s good practice to make your text as readable as possible.
+Even in these circumstances it’s good practice to make your text as readable as possible.