Mobile: Low Contrast Checker/Notice for Text-Based Blocks

[SiobhyB]

Description

The option to add colours to text blocks was introduced to the apps in #33250.

A nice feature that accompanies this option on the web is the following notice when colours with a low contrast are being used together:

This colour combination may be hard for people to read. Try using a brighter background colour and/or a darker text colour.

The notice is a useful prompt for site owners that helps to promote accessibility and it could be nice to add to the apps.

Step-by-step reproduction instructions

• Add a new text block (e.g. the paragraph block) to a new a post in the mobile app and type some text.
• Tap the block's cog/gear icon to edit its settings.
• Select a foreground and background colour that have a low contrast to one another (e.g. two really dark colours).
• Observe how the text is hard to read, but there is no notice like there is on the web.

Screenshots or screen recording

The notice as it appears on the web:

[chipsnyder]

This is a great suggestion @SiobhyB!

[jd-alexander]

Good idea! The help prop could be leveraged to include this notice below the colors.

[SiobhyB]

Noting here that I'll be working on this week, for HACK week, with @iamthomasbishop. :) @iamthomasbishop, an initial question I have is whether you'd like to see this notice on both the colour picker's main sheet and sub sheet.

Main Sheet	Sub Sheet

My first thought is that it should appear in both places, but also wonder whether that may make the main sheet seem cluttered for some blocks. Interested to hear your thoughts!