Dilemma - Foreground and Background Colours:

[syllo]

Hi Everyone

I am working on a complex subject that is very difficult to explain using text only and have created a frame based interactive type of an eBook using Xara.
This means, the document has a lot of movement in a form of step animation with "dynamic" text and graphics which change colour and position on most frames.

However, i am having difficulties finding a balanced fore and background colour combination that is user friendly to the eyes and wonder if anyone has a suggestion?

Attached is a sample image with different backgrounds that i have tried so far but i am not quite satisfied as some people may have difficulties reading black or white text on different backgrounds.

Any feedback will be much appreciated and thanks for reading.

Regards,

[handrawn]

general rule - keep the text dark and the background light

so, in terms of legibility, black text on white or light orange background is good; black text on dark blue or grey background is not

different readers will have different screen settings and be viewing in different lighting conditions; keep it simple

[Chris M]

Ask a GPT. I used the background colour from example (b) using the simple prompt 'What are 5 contrasting colours to #505c6a?'

DeepSeek:
To find five contrasting colors to #505c6a (a muted blue-gray), we can use color theory principles like complementary, split-complementary, or triadic schemes. Here are five contrasting colors:
#FFA07A (Light Salmon)
A warm, soft orange that contrasts nicely with the cool blue-gray.
#F0E68C (Khaki)
A muted yellow that provides a subtle yet effective contrast.
#DDA0DD (Plum)
A soft purple that complements the blue-gray while adding a touch of vibrancy.
#8FBC8F (Dark Sea Green)
A muted green that creates a natural, earthy contrast.
#CD5C5C (Indian Red)
A warm red that strongly contrasts with the cool tones of #505c6a.
These colors balance the muted tone of #505c6a while providing visual interest and contrast.

ChatGPT:
The hex code #505c6a is a muted blue-gray. To find contrasting colors, we can look at complementary, triadic, or high-contrast color schemes. Here are five contrasting colors:
#A66A50 (Warm brown) – A complementary color to balance the coolness of #505c6a.
#6A505C (Muted rose) – A contrasting yet harmonious dusty pink.
#A6505C (Vibrant red-pink) – A high-contrast warm hue.
#50A66A (Soft green) – A nature-inspired contrast with a fresh feel.
#A6A650 (Olive yellow) – A striking earthy contrast.
Would you like more variations or a different contrast method?

CoPilot:
Here are five contrasting colors to #505C6A, a muted blue-gray tone:
Warm Coral (#FF7F50): A lively coral stands out brilliantly against the coolness of blue-gray.
Golden Yellow (#FFD700): A bold yellow creates a vibrant and eye-catching contrast.
Bright Turquoise (#40E0D0): A vivid turquoise adds a fresh, energetic contrast.
Soft Peach (#FFE5B4): A light, warm peach complements the subdued blue-gray beautifully.
Rusty Red (#8B0000): A deep, warm red provides a striking juxtaposition.
If you'd like help imagining how these colors might look together or in any particular design context, let me know!

[handrawn]

using contrasting colours for the background is a good idea in principle, as long as they are light hues

and if i am going for legibility over style i would also always go with black text

[syllo]

Wow, amazing..!

Thank you so much guys for your responses as well as inputs. Since you have provided some hex values, i will try them on Xara and see how they look and will give some feedback afterwards.

Much appreciated and thanks once again...

[syllo]

Thanks a mill, here is the color pallete from your suggestions with hopes i did not mess up on hex codes. For some reason i find the Deep Seek set friendlier but might not appeal to everyone as it is with most things but, if i would choose i think that would be it. I will do some other contrast comparisons with different colors and see what i get but also don't want to spend much time on it as i have recently done.

And, thanks once again...

[Acorn]

...some people may have difficulties reading black or white text on different backgrounds...

syllo, I can visualise you trying to balance the colours for the options 1-5 against many backgrounds but you mentioned text as well.

Why not place a White Box behind your Black Text?

XDProX11 only has Text Background, which is rather limiting.
Later versions also have Paragraph Background.

I personally use CSS to achieve this, first setting the Text Area to Name:htmlblocktext:
<style>
p {
background-color: white;
padding: 1em;
}
</style>

The quickest in later versions is Text Inside but that fits text to box, which is not always the best approach, though it readily affords rounding and padding.

Acorn

[Jonopen]

Might be also worth taking a look at online colour contrast checkers. Here’s one (link below) that has tools to help choose contrasting colours as measured against the Web Content Accessibility Guidelines (WCAG). They also offer various example colour palettes that you can save or export.

https://coolors.co/contrast-checker/112a46-acc8e5

[syllo]

Super cool tool...!

Thanks for the tip, i will certainly give it a shot.

[syllo]

syllo, I can visualise you trying to balance the colours for the options 1-5 against many backgrounds but you mentioned text as well.

Why not place a White Box behind your Black Text?

XDProX11 only has Text Background, which is rather limiting.
Later versions also have Paragraph Background.

I personally use CSS to achieve this, first setting the Text Area to Name:htmlblocktext:
<style>
p {
background-color: white;
padding: 1em;
}
</style>

The quickest in later versions is Text Inside but that fits text to box, which is not always the best approach, though it readily affords rounding and padding.

Acorn

Hi Acon

Yes, text is an equal important aspect of the whole thing as people need to read the jumping text. I actually thought it would be best to have two columns with different backgrounds, one for text with a white background and one for the content that would work best with the five colors. See the attached example for functionality with a single background color.