@redesignbybre | DIY Home, Furniture Makeovers, & Crafts

# Fix Color Contrast – WCAG 1.4.3 / ADA Title III
**Page:** https://www.redesignbybre.com/
**Detected:** WordPress · WPBakery
**Selector:** .td-module-meta-info-top > .td-post-category
**Current state:**
- Text color:  #70c3b7
- Background:  #ffffff
- Ratio:       2.06:1
**Required:** 4.5:1:1 (WCAG AA / ADA Title III)
**Fix (WPBakery):**
1. Open the page in WPBakery (frontend/backend editor).
2. Find the matching block/element using selector: .td-module-meta-info-top > .td-post-category.
3. Adjust text/background colors to meet at least 4.5:1:1 contrast.
4. Try text color #497f77 and verify with a contrast checker.
**Suggested color:** #497f77
Use a contrast checker (e.g. https://webaim.org/resources/contrastchecker/) to verify.
**Standards:** ADA Title III · WCAG 2.2 1.4.3 · Section 508

# Fix Empty Link – WCAG 4.1.2 / ADA Title III
**Page:** https://www.redesignbybre.com/
**Detected:** WordPress · WPBakery
**Selector:** .td-image-box-span:nth-child(1) > .td-custom > .td-custom-image.td-no-img-custom-url > .td-lazy-img[title=""][data-type="css_image"]
**Element:** <a class="td-lazy-img td-anima..." data-type="css_image" data-img-url="https://www.redesign..." href="#" title="" style="background-image: ur...">
**Problem:**
Link has no accessible name. Screen reader users cannot determine its purpose.
**Fix (WPBakery):**
1. Open the page in WPBakery (frontend/backend editor).
2. Find the matching block/element using selector: .td-image-box-span:nth-child(1) > .td-custom > .td-custom-image.td-no-img-custom-url > .td-lazy-img[title=""][data-type="css_image"].
3. Set descriptive visible link text, or add an aria-label that describes destination/purpose.
4. Avoid ambiguous labels like “click here” without context.
**Standards:** ADA Title III · WCAG 2.2 4.1.2 · Section 508

# Fix Color Contrast – WCAG 1.4.3 / ADA Title III
**Page:** https://www.redesignbybre.com/
**Detected:** WordPress · WPBakery
**Selector:** time[datetime="2025-01-25T22:09:26-05:00"]
**Current state:**
- Text color:  #aaaaaa
- Background:  #ffffff
- Ratio:       2.32:1
**Required:** 4.5:1:1 (WCAG AA / ADA Title III)
**Fix (WPBakery):**
1. Open the page in WPBakery (frontend/backend editor).
2. Find the matching block/element using selector: time[datetime="2025-01-25T22:09:26-05:00"].
3. Adjust text/background colors to meet at least 4.5:1:1 contrast.
4. Try text color #6f6f6f and verify with a contrast checker.
**Suggested color:** #6f6f6f
Use a contrast checker (e.g. https://webaim.org/resources/contrastchecker/) to verify.
**Standards:** ADA Title III · WCAG 2.2 1.4.3 · Section 508

# Fix Heading Order – WCAG 1.3.1 / ADA Title III
**Page:** https://www.redesignbybre.com/
**Detected:** WordPress · WPBakery
**Selector:** .td-module-meta-info-top > .td-module-title.entry-title
**Element:** <h3 class="entry-title td-module-title"><a href="https://www.redesignbybre.com/when-furniture-preservation-goes-wrong/" rel="bookmark" title="When Preservation Goes Wrong">When Preservation Goes Wrong
**Problem:**
Heading levels are not sequential (e.g. H1 → H3, skipping H2).
Screen reader users rely on heading hierarchy to navigate content.
**Fix (WPBakery):**
1. Open the page in WPBakery (frontend/backend editor).
2. Find the matching block/element using selector: .td-module-meta-info-top > .td-module-title.entry-title.
3. Adjust heading level to keep hierarchy sequential (H1 → H2 → H3).
4. Do not skip heading levels for visual styling alone.
**Note:** Only one H1 per page. All section headings should be H2.
Sub-section headings should be H3, and so on.
**Standards:** ADA Title III · WCAG 2.2 1.3.1 · Section 508

# Fix Color Contrast – WCAG 1.4.3 / ADA Title III
**Page:** https://www.redesignbybre.com/
**Detected:** WordPress · WPBakery
**Selector:** .td-module-meta-info-bottom > .td-excerpt
**Current state:**
- Text color:  #777777
- Background:  #ffffff
- Ratio:       4.47:1
**Required:** 4.5:1:1 (WCAG AA / ADA Title III)
**Fix (WPBakery):**
1. Open the page in WPBakery (frontend/backend editor).
2. Find the matching block/element using selector: .td-module-meta-info-bottom > .td-excerpt.
3. Adjust text/background colors to meet at least 4.5:1:1 contrast.
4. Try text color #4d4d4d and verify with a contrast checker.
**Suggested color:** #4d4d4d
Use a contrast checker (e.g. https://webaim.org/resources/contrastchecker/) to verify.
**Standards:** ADA Title III · WCAG 2.2 1.4.3 · Section 508