[Security Solution] Secondary text fails AAA colour contrast

[gavinwye]

Describe the bug:
Small secondary text fails AAA colour contrast

Kibana/Elasticsearch Stack version:
v 7.16.1

Original install method (e.g. download page, yum, from source, etc.):
Eden

Functional Area (e.g. Endpoint management, timelines, resolver, etc.):
Detect > Exceptions (probably all Kibana

Current behavior:
Text colour is set to #69717d on a background of #fefeff which fails AAA

See: https://colourcontrast.cc/fefeff/69717d

Expected behavior:

Changing the text colour to #000000 visually makes the design clearer and also passes AAA increasing our accessibility score overall. See before and after screenshots below.

If we're going to put contention on the page we should make sure everyone can read it.

Screenshots (if relevant):

Before

After

[elasticmachine]

Pinging @elastic/security-solution (Team: SecuritySolution)

[snide]

@gavinwye . I think this one could be fixed by using proper EUI components. Using the proper EuiPage components (like EuiPageHeader) would standardize this with the proper spacing / coloring. Right now the header for this page looks like it has a lot of overwrites. Just bringing that up because the solution here shouldn't be to use an overwrite and set it to #000. Also remember that we have a dark mode, so that color wouldn't work for dark mode, so normally want to suggest using the components themselves.

Can see this in practice here. Small reminder that there is both a high-order component, and smaller ones that could be used to solve this problem.

https://elastic.github.io/eui/#/layout/page#restricting-page-width

[snide]

While we're looking at this section, likely this weird tooltip needs some thought as well. Seems unnecessary?

[yctercero]

@gavinwye @snide how do the updates here look? #122870

[gavinwye]

Updates on #122870 LGTM :)

I agree with @snide that we could fix that tooltip. I'm inclined to suggest removing it seeing as it's duplicating content that's on the page. Is there anything in the code that would imply that it would ever contain anything other than the same content?

[yctercero]

This PR has been merged.

@MadameSheema ready for QA check!

[MadameSheema]

Thanks @yctercero!! is there any reason why this fix is targeting 8.1 and not 8.0? Thanks!

[yctercero]

@MadameSheema I wasn't sure if I could with the RC2 cut off. I can backport it.

[MadameSheema]

@oatkiller can you please confirm this so in case we can backport to include the fix on RC2 bc2? Thanks!

[oatkiller]

@MadameSheema @yctercero Please feel free to backport to 8.0.

[yctercero]

Backport to 8.0 started - #123787

@MadameSheema @oatkiller

[MadameSheema]

@deepikakeshav-qasource please validate the following fix on latest 8.0-rc2 BC.

[ghost]

Hi @MadameSheema ,

We have validated this issue on 8.0.0 RC2 BC4 and observed that Text color has been changed to #343741 . please let us know if it is expected

Please find below testing details:

Build Details:

Version: 8.0.0 RC2 BC4
Build: 49192
Commit: 57ca5e139a33dd2eed927ce98d8231a1f217cd15

Screenshot:

Thanks!!!

[MadameSheema]

@yctercero can you please check Deepika's comment? Thanks

[yctercero]

Hey @deepikakeshav-qasource ! That is expected, it's now using the EUI component as opposed to the custom header component we were using before.