Comments (11)
I would like to assign this to myself.
from hackathon-starter.
Hello sir, i would like to solve this issue
from hackathon-starter.
@harshul-2002 I'm a contributor as well :). I've made a PR for now, waiting for approval.
from hackathon-starter.
We don't need this at this point
from hackathon-starter.
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.
from hackathon-starter.
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.
from hackathon-starter.
(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.
from hackathon-starter.
(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 ofstyle='color: #000'
orstyle='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!
from hackathon-starter.
@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.
from hackathon-starter.
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.
from hackathon-starter.
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.
from hackathon-starter.
Related Issues (20)
- URL is not working HOT 3
- Error building docker image HOT 7
- Learn node
- Can we use nodemon by default? HOT 2
- Brave browser blocks the cookieconsent HOT 1
- Node 20 HOT 4
- mongoose connection HOT 3
- Add JWT Authentication Support
- Implement Passport Serialization and Deserialization HOT 5
- Implement support for Novu as a notification infrastructure HOT 1
- Will make navbar remain on top on scrolling HOT 5
- Creating seperate database config file HOT 2
- Destroying the cookies after logout of user HOT 2
- Adding OAUTH 2.0 HOT 3
- Refactoring config/passport.js HOT 5
- Mongo Running, Connection Error
- Asked assistant HOT 1
- Migrate from namespaced javaScript to Modular javaScript
- Encountering an issue with the script execution in Windows environment. HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from hackathon-starter.