Uniform text colour under "API Examples" tab

[VatsalBhuva11]

Right now, the text and the underline of the "Foursquare" and the "Stripe" buttons have different colours, which looks non-uniform. The underline is white, while the text is black. I think it would be better to make the text white as well. Attaching a screenshot:

[VatsalBhuva11]

I would like to assign this to myself.

[harshul-2002]

Hello sir, i would like to solve this issue

[VatsalBhuva11]

@harshul-2002 I'm a contributor as well :). I've made a PR for now, waiting for approval.

[YasharF]

We don't need this at this point

[VatsalBhuva11]

We don't need this at this point

maybe atleast the underline color can be changed to black, and keep the text color black. black text with white underline looks kinda off.

[YasharF]

OK, I see. The desired rendered view would be to color match the underline of the text links with the color of the text. For example:

• In case of the Github, the text is white and the underline of it is white as well.
• In case of PayPal, the text is black and the underline is black as well.

The issue: Foursquare, Stripe, and File Upload do not follow the above theme.

• Foursquare's text is black, but the underline is white. The underline needs to change to white.
• Stripe's text is black, but the underline is white. The underline needs to change to white.
• File Upload's text is black, but the underline is blue. The underline needs to change to white.

[YasharF]

(https://github.com/sahat/hackathon-starter/blob/dcf10bd62055c5b5e92af67719228238cc952767/views/api/index.pug#L93C44-L93C50) seem to have a one-off style color style='color: #1565c0' which is a blue, instead of style='color: #000' or style='color: #fff'. HERE Maps seem to have a one-off color as well, but visually doesn't seem to have an issue. @VatsalBhuva11 can you investigate this? Do they both have a bug? Is changing the style colors to #000 or #fff the fix? If not, why not?

Does the same thing apply to the Foursquare and Stripe's style?

Thanks.

[VatsalBhuva11]

(https://github.com/sahat/hackathon-starter/blob/dcf10bd62055c5b5e92af67719228238cc952767/views/api/index.pug#L93C44-L93C50) seem to have a one-off style color style='color: #1565c0' which is a blue, instead of style='color: #000' or style='color: #fff'. HERE Maps seem to have a one-off color as well, but visually doesn't seem to have an issue. @VatsalBhuva11 can you investigate this? Do they both have a bug? Is changing the style colors to #000 or #fff the fix? If not, why not?

Does the same thing apply to the Foursquare and Stripe's style?

Thanks.

sure, let me have a look at it. thanks!

[VatsalBhuva11]

@YasharF While changing the text-colour of Stripe and Foursquare to #000 (black) does make the colour code uniform, I think that a white colour might look better on a blue background particularly because black text has majorly been used only over white background on the buttons. Black text on white seems "natural" to the eyes, and hence we don't really notice the difference between the text colours on the different backgrounds! On the other hand, to have white on some blue buttons (like Facebook, QuickBooks) and black on others would again, be your choice of preference but my suggestion is to make all shades of blue have a text and underline colour of white as it would seem more natural. That would ensure that all non-white backgrounds have a white text, and white backgrounds have a black text, making it look uniform to the eyes.

[VatsalBhuva11]

As far as the underline on the "File Upload" button is concerned, the dark shade of blue doesn't really distinguish itself from black, just like white distinguished itself from black on the "Stripe" and "Foursquare" buttons. To make the code uniform, however, it would of-course be better to change the blue underline to black even if it does not create any drastic visual changes.

[YasharF]

The color should go based on the W3C Web Content Accessibility Guidelines (WCAG). In summary, between white and black, the color that produces the higher contrast ratio is the one to be picked to conform to the W3C WCAG recommendation. The relevant parts of the standard are: https://www.w3.org/TR/WCAG21/#contrast-minimum https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio https://www.w3.org/TR/WCAG21/#dfn-relative-luminance

• In case of Stripe, the background color is 3da8e5, which results in computed contrast ratio of 7.93:1 for black and 2.64:1 for white. Black has the higher contrast ratio and hence is the color to use for the text for Stripe's card.
• In case of Foursquare, the background color is 1cafec, which results in computed contrast ratio of 8.39:1 for black and 2.5:1 for white. Black has the higher contrast ratio and hence is the color to use for the text for Foursquare's card.

If adjusting the style='color: #fff' to style='color: #000' for the four (4) cards is the fix the mismatch between the text and underlines, and to use the same theme across all cards, I would be happy to accept a PR given:

• Style color changes for the four buttons are the scope: Stripe, Foursquare, File Upload, HERE Maps
• The style colors are being set to #fff and #000 depending on whichever one produces the higher contrast per W3C WCAG recommendation and calculation formulas.
• All changes are in a single git commit

Priority to a PR submission by VatsalBhuva11 for the next 10 days since he identified the issue and has been looking into it.