ADA Compliance - Contrast Concerns

Note: When applying changes, remove the word HEXCODE and replace it with the appropriate color code for your situation. All code can be copy/pasted under Settings > Design. Please clear your website cache (plugin or host level) and browser cache to see all changes. 

Contrast Ratio should be at least 7.0:1 - 8.0:1. Err on the side of 8.0:1 as we have found that this will satisfy all needs. Needs vary from site to site depending on custom CSS that may have been added for branding. Assess site with https://wave.webaim.org/ and adjust as necessary. (You can adjust the contrast on the page using their tool to see what will pass)

SEARCH BAR CONTRAST

Streamlined “More” Search

If you are using the Streamlined version of the IDX on your website, either change the foreground color (text) or the background color to pass the test.

.sidx-container .sidx-streamlined-search .sidx-streamlined-toggle {

color: #hexcode !important /to change the text color/

background-color: #hexcode !important /to change the background color/
}

Search Button on Search Widget ([showcaseidx_search])

Text usually stays white in most cases so you can just adjust the background color to pass the test.  

.sidx-container .sidx-button.sidx-primary, .sidx-container button.sidx-primary {

color: #hexcode !important /to change the text color/

background: #hexcode !important /to change the background color/

}

Advanced Search Link (if included in your shortcode)

This might only apply to you if you are using the advanced search version of the IDX on your website. 

.sidx-container .sidx-collapse-button {

color: #hexcode !important;
}

HOTSHEET CONTRAST (also valid on default search) (listing cards)

Property Type Text (eg. Townhouse For Sale, Condo For Sale (usually the green text on hotsheets)) (This element exhibited an “alert” for the text being too small, see recommended font size adjustment included. 11px is the minimum to satisfy the need)

Code for For Sale and For Rent needs to be applied as the code varies slightly.

FOR SALE 

.sidx-container .sidx-search-results .sidx-mls-details .sidx-for-sale {

color: #hexcode !important;

font-size: 11px !important
}

 FOR RENT

.sidx-container .sidx-search-results .sidx-mls-details .sidx-for-rent {

color: #hexcode !important;

font-size: 11px !important
}

Status Text (eg. Pending, Active (usually in grey))  (This element exhibited an “alert” for the text being too small, see font size adjustment included. 11px is the minimum to satisfy the need)

.sidx-mls-info {

color: #hexcode !important;

font-size: 11px !important

}

Beds, Baths and SqFt Info (on Land properties, this would be the county information)

.sidx-container .sidx-search-results .sidx-info-blocks .sidx-info-block {

color: #hexcode !important;
}

Subdivision Info

.sidx-container .sidx-search-result-grid-item .sidx-listing-heading em {

color: #hexcode !important;
}

Should you have any issues with these codes, please contact Customer Success at help@showcaseidx.com or 1-800-478-0181.